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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-250 {
        /* set padding top to 0 if the section above it is another white background section, same for padding bottom. We added the padding here in case this section gets placed above or below sections with full background colors.  Without this padding, the top of this sections color portion will be touching the neighboring section edge and it looks bad */
        padding: var(--sectionPadding);
        padding-left: 0;
        padding-right: 0;
        position: relative;
        z-index: 1;
    }
    #sbs-250 .cs-container {
        width: 100%;
        /* changes to 1280px on tablet */
        max-width: 34.375rem;
        padding: var(--sectionPadding);
        margin: auto;
        background: var(--primary);
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
        position: relative;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
    }
    #sbs-250 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 27.125rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #sbs-250 .cs-topper {
        color: var(--tertiary);
    }
    #sbs-250 .cs-title {
        color: var(--tertiary);
    }
    #sbs-250 .cs-text {
        margin-bottom: 1rem;
        color: var(--tertiary);
    }
    #sbs-250 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbs-250 .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: var(--primary);
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--tertiary);
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #sbs-250 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: var(--primaryLight);
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #sbs-250 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbs-250 .cs-button-solid:hover {
        color: var(--tertiary);
    }
    #sbs-250 .cs-picture {
        width: 100%;
        max-width: 32.625rem;
        margin: 0;
        border: 1px solid var(--tertiary);
        position: relative;
        display: block;
        /* width divided by height */
        aspect-ratio: 1;
        /* prevents border from adding to height and width */
        box-sizing: border-box;
    }
    #sbs-250 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbs-250 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    #sbs-250 .cs-picture {
        /* 415px - 522px */
        height: clamp(25.9375rem, 40.5vw, 32.625rem);
        width: 50%;
        flex: none;
    }
    #sbs-250 .cs-content {
        max-width: 33rem;
        margin: 0;
        width: 45%;
    }
}