/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-567 {
    padding: var(--sectionPadding);
  }
  #reviews-567 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-567 .cs-content {
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    width: 100%;
    /* set text align to left if content needs to be left aligned */
    text-align: center;
  }
  #reviews-567 .cs-button-solid {
    display: block;
    margin: 0 auto;
  }
  #reviews-567 .cs-card-group {
    width: 100%;
    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-567 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 39.375rem;
    /* 32px - 60px top & bottom */
    /* 16px - 48px left & right */
    padding: clamp(2rem, 6.15vw, 3.75rem) clamp(1rem, 4.15vw, 3rem);
    background-color: var(--sectionColor);
    border-radius: 1em;
    /* 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-567 .cs-stars {
    /* 169px - 189px */
    width: clamp(10.5625rem, 20vw, 11.8125rem);
    height: auto;
    /* 20px - 24px */
    margin-bottom: clamp(1.25rem, 3vw, 1.5rem);
    display: block;
  }
  #reviews-567 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    /* 40px - 64px */
    margin-bottom: clamp(2.5rem, 8vw, 4rem);
    color: var(--bodyTextColor);
  }
  #reviews-567 .cs-flex-group {
    /* 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;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
  }
  #reviews-567 .cs-profile {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    /* clips image corners to make circle */
    overflow: hidden;
    position: relative;
    display: block;
    padding: 1rem;
    background-color: #fff;
  }
  #reviews-567 .cs-profile img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes the image behave like a background image */
    object-fit: cover;
  }
  #reviews-567 .cs-name {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.5em;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-567 .cs-button-solid {
    display: block;
    margin: 0 auto;
  }
  #reviews-567 .cs-container {
    max-width: 80rem;
  }
  #reviews-567 .cs-card-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Two columns */
    gap: clamp(1rem, 2.5vw, 1.15rem);
    width: 100%;
  }
  #reviews-567 .cs-item {
    width: 100%;
    /* Take full width of grid cell */
    max-width: 100%;
  }
}
/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #reviews-567 .cs-button-solid {
    display: block;
    margin: 0 auto;
  }
  #reviews-567 .cs-card-group {
    grid-template-columns: repeat(3, 1fr);
    /* Three columns on desktop */
  }
  #reviews-567 .cs-item {
    width: 100%;
    align-items: flex-start;
  }
  #reviews-567 .cs-item:last-of-type {
    align-items: flex-start;
  }
  #reviews-567 .cs-item:last-of-type .cs-item-text {
    text-align: left;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #reviews-567 .cs-topper {
    color: var(--secondary);
  }
  body.dark-mode #reviews-567 .cs-title,
  body.dark-mode #reviews-567 .cs-text,
  body.dark-mode #reviews-567 .cs-item-text,
  body.dark-mode #reviews-567 .cs-name,
  body.dark-mode #reviews-567 .cs-job {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews-567 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #reviews-567 .cs-item {
    background-color: var(--accent);
  }
}