/**=====================
Offer scss
==========================**/


.offer-section {
    .offer-content {
        .sale-tag {
            position: absolute;
            top: calc(12px + (25 - 12) * ((100vw - 320px) / (1920 - 320)));
            left: 0;
            background-color: #FF4B4B;
            padding: 8px calc(28px + (36 - 28) * ((100vw - 320px) / (1920 - 320))) 8px calc(10px + (16 - 10) * ((100vw - 320px) / (1920 - 320)));
            color: #ffffff;
            z-index: 1;
            clip-path: polygon(0 0, 28% 0%, 67% -24%, 83% 7%, 84% 14%, 84% 27%, 84% 0%, 84% 32%, 82% 41%, 81% 49%, 81% 78%, 81% 74%, 80% 44%, 84% 65%, 84% 74%, 84% 77%, 82% 93%, 79% 100%, 84% 100%, 68% 100%, 0 100%);
            display: flex;
            line-height: 1;

            [dir="rtl"] & {
                transform: scaleX(-1);
                left: unset;
                right: 0;

                span {
                    transform: scaleX(-1);
                }
            }

            span{
                font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1920 - 320)));
                // line-height: 1;
            }
        }

        .offer-img {
            border-radius: 10px;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            [dir="rtl"] & {
                transform: scaleX(-1);
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .offer-detail {
            position: relative;
            inset: unset;
            padding-block: calc(50px + (75 - 50) * ((100vw - 320px) / (1920 - 320))) calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
            padding-left: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));

            [dir="rtl"] & {
                padding-left: unset;
                padding-right: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
            }

            h3 {
                font-size: calc(18px + (24 - 18) * ((100vw - 320px) / (1920 - 320)));
                font-weight: 700;
                line-height: 1.4;
            }

            p {
                color: rgba($title-color, 0.5);
                line-height: 1.5;
                width: 70%;
                margin-top: 4px;
                @media (max-width:1029px) {
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    word-break: break-all;
                    text-overflow: ellipsis;
                }
            }

            .btn {
                padding: 10px 20px;
                line-height: 1;
                width: max-content;
                color: $title-color;

                &.btn-outline {
                    margin-top: calc(14px + (24 - 14) * ((100vw - 320px) / (1920 - 320)));
                    border: 2px solid $title-color;
                    border-radius: 100px;
                    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
                    font-weight: 500;
                    padding: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320))) calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
                    // padding: 8px 17px;

                    &:hover {
                        background-color: $title-color;
                        color: $white;
                    }
                }
            }
        }
    }
}