/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    /*
    #sbsr-298 {
        padding: var(--sectionPadding);
    }
    */
    #sbsr-298 .cs-container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #sbsr-298 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        max-width: 32.625rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }

    #sbsr-298 .cs-text {
        margin-bottom: 1rem;
    }
    #sbsr-298 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbsr-298 .cs-link {
        font-size: 1.25rem;
        font-weight: 700;
        text-decoration: none;
        color: var(--primary);
    }
    #sbsr-298 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #sbsr-298 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #sbsr-298 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbsr-298 .cs-image-group {
        width: 100%;
        max-width: 34.375rem;
        /* 78px - 108px */
        margin: 0 auto clamp(4.875rem, 16.5vw, 6.75rem);
        position: relative;
        display: block;
        /* width divided by height */
        aspect-ratio: 0.90358127;
        overflow: hidden;
    }
    
    #sbsr-298 .cs-image-group::before {
        content: "";
        display: block;
        padding-top: calc(100% / 0.90358127); /* Inverse of aspect ratio */
    }
    
    #sbsr-298 .cs-image-group iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }
    #sbsr-298 .cs-picture {
        /* big background image */
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
    }
    #sbsr-298 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-radius: 0.625rem;
        object-fit: cover;
    }
    #sbsr-298 .cs-box {
        /* 204px - 326px & changes at desktop */
        width: clamp(12.75rem, 50vw, 20.375rem);
        height: clamp(12.75rem, 50vw, 20.375rem);
        border-radius: 0.625rem;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: absolute;
        left: 50%;
        /* 38px - 60px - wrapped in a calc function to make clamp values negative */
        bottom: calc(clamp(2.375rem, 7.9vw, 3.75rem) * -1);
        transform: translateX(-50%);
        z-index: 10;
    }
    #sbsr-298 .cs-box-picture {
        /* Background image for cs-box */
        width: 100%;
        height: 100%;
        background-color: #000;
        border-radius: 0.625rem;
        /* clips img corners and bg corners */
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        z-index: -1;
    }
    #sbsr-298 .cs-box-picture img {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.65;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #sbsr-298 .cs-number {
        /* 75px - 100px */
        font-size: clamp(4.6875rem, 8vw, 6.25rem);
        line-height: 1em;
        font-weight: 900;
        margin-bottom: 0.5rem;
        color: var(--headerColor);
        /* creates the transparent clipping text */
        mix-blend-mode: screen;
        display: block;
        z-index: 10;
    }
    #sbsr-298 .cs-number:before {
        /* opaque white box - For mix-blend-mode to work, we need the 
                   white box inside the .cs-number, so we use a pseudo element.
                   We DON'T add a position to the cs-number so the pseudo positions
                   itself relative to the .cs-box, which has position relative. This
                   allows us to center to .cs-number pseudo inside the .cs-box */
        content: "";
        /* 184px - 294px & changes at desktop */
        width: clamp(11.5rem, 45vw, 18.375rem);
        height: clamp(11.5rem, 45vw, 18.375rem);
        opacity: 1;
        background-color: #fff;
        border-radius: 0.4375rem;
        position: absolute;
        display: block;
        /* these next 3 properties are an old school way to center an absolutely
                   positioned element inside a relative position parent */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
    #sbsr-298 .cs-desc {
        /* 16px - 25px */
        font-size: clamp(1rem, 4vw, 1.5625rem);
        font-weight: 700;
        line-height: 1.2em;
        text-transform: lowercase;
        text-align: center;
        width: 80%;
        color: var(--headerColor);
        position: relative;
        z-index: 10;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-298 {
        /* aligns the button */
        text-align: left;
    }
    #sbsr-298 .cs-container {
        max-width: 80rem;
        /* set to horizontal arrangement */
        flex-direction: row;
        justify-content: space-between;
        gap: 10rem;
    }
    #sbsr-298 .cs-content {
        text-align: left;
        align-items: flex-start;
    }
    #sbsr-298 .cs-image-group {
        width: 40vw;
        max-width: 32.5625rem;
        /* 520px - 672px */
        height: clamp(32.5rem, 51.9vw, 42rem);
        margin: 0;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
    #sbsr-298 .cs-box {
        /* 251px - 325px */
        width: clamp(15.6875rem, 24.5vw, 20.3125rem);
        height: clamp(15.6875rem, 24.5vw, 20.3125rem);
        left: auto;
        transform: none;
        /* -52px to -102px */
        left: calc(clamp(3.25rem, 5.5vw + 1.6rem, 6.375rem) * -1);
        /* 62px - 80px */
        bottom: clamp(3.875rem, 6.2vw, 5rem);
    }
    #sbsr-298 .cs-number:before {
        /* 226px - 293px */
        width: clamp(14.125rem, 22.7vw, 18.3125rem);
        height: clamp(14.125rem, 22.7vw, 18.3125rem);
    }
}