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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-499 {
    margin: var(--sectionPadding);
    margin-left: 0;
    margin-right: 0;
    padding: 0 1rem;
    /* prevents overflow from the slant shape */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbs-499:before {
    /* section background */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #sbs-499 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    /* 60px - 100px top and bottom */
    padding: clamp(3.75rem, 6.82vw, 6.25rem) 0;
    /* maintains proportional margin top as screen size grows */
    margin-top: 56vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    /* places it on top of the cs-background */
    z-index: 10;
  }
  #sbs-499 .cs-container:before {
    /* section slant on mobile */
    content: "";
    width: 62.5rem;
    height: 125rem;
    background: var(--primary);
    /* prevents mouse from interacting with it */
    pointer-events: none;
    opacity: 1;
    position: absolute;
    z-index: -1;
    display: block;
    top: -28.75rem;
    /* these last two center it horizontally and rotate -65deg */
    left: 50%;
    transform: translateX(-50%) rotate(65deg);
  }
  #sbs-499 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: right;
    width: 100%;
    max-width: 32.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-end;
  }

  #sbs-499 .cs-topper,
  #sbs-499 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #sbs-499 .cs-title {
    /* changes to 100% at tablet */
    max-width: 80%;
  }
  #sbs-499 .cs-text {
    margin-bottom: 1rem;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #sbs-499 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-499 .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: #1a1a1a;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--secondary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s;
  }
  #sbs-499 .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;
  }
  #sbs-499 .cs-button-solid:hover {
    color: #fff;
  }
  #sbs-499 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-499 .cs-background {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbs-499 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-499:before {
    /* remove the pseudo for the section background */
    display: none;
  }
  #sbs-499 .cs-background {
    /* reset height to let top and bottom properties create the height */
    height: auto;
    aspect-ratio: initial;
    position: absolute;
    /* creates the gap between the image and the blue section */
    top: 3.75rem;
    bottom: 0;
  }
  #sbs-499 .cs-background img {
    width: 60%;
    object-position: 80% top;
  }
  #sbs-499 .cs-container {
    margin-top: 0;
  }
  #sbs-499 .cs-container:before {
    /* make really tall so it always covers top to bottom, even when you add more list items */
    height: 250rem;
    /* make really really wide so it covers the left side at large scree sizes */
    width: 250rem;
    /* push X amount from the center line to the right.  If after you added content and the slant is not covering everything, make this negative number even more negative to pull it more to the right */
    margin-left: -68.75rem;
    top: 50%;
    left: auto;
    /* pushes the left edge of the element to the center line of the parent */
    left: 50%;
    transform: rotate(35deg) translateY(-50%);
  }
  #sbs-499 .cs-content {
    width: 50%;
  }
  #sbs-499 .cs-title {
    max-width: 100%;
  }
}