/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-355 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
  }
  #reviews-355 .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-355 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #reviews-355 .cs-title {
    max-width: 25ch;
  }
  #reviews-355 .cs-card-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.15rem);
  }
  #reviews-355 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 39.375rem;
    margin: 0;
    /* 24px - 32px top & bottom */
    /* 16px - 40px left & right */
    padding: clamp(1.5rem, 3.15vw, 2rem) clamp(1rem, 3.15vw, 2.5rem);
    background-color: #fff;
    border-radius: 0.5rem;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
  }
  #reviews-355 .cs-quote {
    width: 2.5rem;
    height: auto;
    margin-bottom: 2rem;
    display: block;
  }
  #reviews-355 .cs-review {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    /* 20px - 40px */
    margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
    color: var(--bodyTextColor);
  }
  #reviews-355 .cs-name {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    /* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
    margin-top: auto;
    color: var(--headerColor);
    display: block;
  }
  #reviews-355 .cs-job {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-355 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
  }
  #reviews-355 .cs-item {
    width: clamp(31.5%, 30vw, 32.3%);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #reviews-355 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #reviews-355 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #reviews-355 .cs-title,
  body.dark-mode #reviews-355 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews-355 .cs-item {
    background-color: var(--accent);
  }
  body.dark-mode #reviews-355 .cs-review,
  body.dark-mode #reviews-355 .cs-name {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews-355 .cs-job {
    color: var(--bodyTextColorWhite);
    opacity: .7;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-598 {
    position: relative;
  }
  #sbs-598 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-598 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 32.625rem;
    /* moved section padding to cs-content so the cs-background can be full width */
    padding: var(--sectionPadding);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs-598 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    margin-bottom: 1rem;
  }
  #sbs-598 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-598 .cs-background {
    display: block;
    position: relative;
    width: 100%;
    height: 16rem;
    z-index: 1;
  }
  #sbs-598 .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-598 {
    /* 90px - 150px */
    /* returned section padding to the section container, this Stitch has 1.5X padding top and bottom than the normal Stitch */
    padding: clamp(5.625rem, 9vw, 9.375rem) 1rem;
  }
  #sbs-598 .cs-container {
    flex-direction: row;
    justify-content: flex-end;
  }
  #sbs-598 .cs-background {
    width: 50%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
  }
  #sbs-598 .cs-content {
    width: 45%;
    padding: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-598 .cs-topper {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-598 .cs-title,
  body.dark-mode #sbs-598 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-598 .cs-text {
    opacity: .8;
  }
}