@use '../../utils' as *;

.special-offer {

    .section {

        &__title-wrapper {
            max-width: 519px;
        }
    }

    .mb-minus-27 {
        margin-bottom: -27px;
    }

    &__item {
        padding: 10px;
        overflow: hidden;
        margin-bottom: 27px;
        @include border-radius(20px);
        background-color: var(--rr-common-white);
        gap: 29px;
        display: flex;
        align-items: center;
        justify-content: center;

        @media #{$xl, $xxl} {
            flex-wrap: wrap;
        }
        @media #{$sm, $xs} {
            display: block;
        }

        &-1 {
            flex-direction: column;
            gap: 0;

            .special-offer__item {

                &-media {
                    width: 100%;
                    img {
                        max-width: 100%;
                        width: 100%;
                    }
                }
                &-content {

                    @media #{$sm, $xs} {
                        padding: 30px 10px 20px;
                    }

                    padding: 30px;
    
                    h3 {
                        text-transform: capitalize;
                        margin-bottom: 8px;

                        @media #{$sm, $xs} {
                            font-size: 24px;
                            line-height: 30px;
                        }
                    }
                }
            }
        }

        &-media {
            @media #{$xl, $xxl} {
                width: 100%;
            }
            img {
                @include border-radius(20px);
                object-fit: cover;

                @media #{$xl, $xxl} {
                    width: 100%;
                    height: 250px;
                }

                @media #{$sm, $xs} {
                    width: 100%;
                    height: 250px;
                }
            }
        }

        &-content {
            padding-right: 19px;

            @media #{$xl, $xxl} {
                padding: 20px;
                padding-top: 0;
            }

            @media #{$sm, $xs} {
                padding: 30px 10px 20px;
            }
            h4 {
                text-transform: capitalize;
                margin-bottom: 10px;

            }
            a {
                color: var(--rr-theme-black);
                &:hover {
                    color: var(--rr-theme-glow);
                }
            }
        }
    }
}