/*-- -------------------------- -->
<---    Welcome Offers SBS     -->
<--- -------------------------- -*/

/* Mobile */
@media only screen and (min-width: 0rem) {
    #sbs-welcome-offers {
        padding: var(--sectionPadding);
    }

    #sbs-welcome-offers .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: clamp(3rem, 6vw, 5rem);
        align-items: center;
    }

    #sbs-welcome-offers .cs-picture {
        width: 100%;
        max-width: 34rem;
        aspect-ratio: 4/5;
        border-radius: 1rem;
        overflow: hidden;
        position: relative;
        box-shadow: 0 20px 40px rgba(0,0,0,.15);
    }

    #sbs-welcome-offers .cs-picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    #sbs-welcome-offers .cs-content {
        width: 100%;
        max-width: 36rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #sbs-welcome-offers .cs-text {
        margin-bottom: 1rem;
    }

    #sbs-welcome-offers .cs-text:last-of-type {
        margin-bottom: 2rem;
    }

    #sbs-welcome-offers .cs-button-solid {
        font-size: 1rem;
        line-height: 3.25rem;
        text-decoration: none;
        font-weight: 700;
        color: #fff;
        background: var(--primary);
        padding: 0 1.75rem;
        border-radius: .5rem;
        display: inline-block;
        position: relative;
        overflow: hidden;
        transition: color .3s;
        z-index: 1;
    }

    #sbs-welcome-offers .cs-button-solid:before {
        content: "";
        position: absolute;
        inset: 0;
        width: 0%;
        background: var(--headerColor);
        transition: width .3s;
        z-index: -1;
    }

    #sbs-welcome-offers .cs-button-solid:hover:before {
        width: 100%;
    }
}

/* Tablet */
@media only screen and (min-width: 48rem) {

    #sbs-welcome-offers .cs-container {
        flex-direction: row;
        justify-content: space-between;
    }

    #sbs-welcome-offers .cs-picture,
    #sbs-welcome-offers .cs-content {
        width: 48%;
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {

    body.dark-mode #sbs-welcome-offers .cs-button-solid:before {
        background: var(--accent);
    }

    body.dark-mode #sbs-welcome-offers .cs-picture {
        box-shadow: 0 20px 40px rgba(0,0,0,.45);
    }
}