/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #reviews-1395 {
        /* centers the button */
        text-align: center;
        padding: var(--sectionPadding);
        /* clips the orbs from causing overflow issues */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #reviews-1395 .cs-container {
        width: 100%;
        /* changes to 1024px at tablet */
        max-width: 36.5rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #reviews-1395 .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-1395 .cs-title {
        max-width: 20ch;
        margin: 0;
    }
    #reviews-1395 .cs-card-group {
        width: 100%;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /* 16px - 20px */
        gap: clamp(1rem, 2.5vw, 1.15rem);
    }
    #reviews-1395 .cs-item {
        list-style: none;
        text-align: left;
        /* 20px - 60px */
        padding: clamp(1rem, 4vw, 3.75rem);
        background-color: #fff;
        /* 12px - 24px */
        border-radius: clamp(0.75rem, 1.5vw, 1.25rem);
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
        /* clips the pseudo box from overflowing */
        overflow: hidden;
        display: flex;
        grid-column: span 12;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        position: relative;
        z-index: 1;
    }
    #reviews-1395 .cs-item:before {
        /* background color */
        content: "";
        width: 100%;
        height: 100%;
        background: var(--platinum);
        opacity: 0.7;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: -1;
        /* prevents the mouse from interacting it */
        pointer-events: none;
    }
    #reviews-1395 .cs-quote {
        /* 72px - 120px */
        width: clamp(4.5rem, 10vw, 7.5rem);
        height: auto;
        /* 32px - 64px */
        margin-bottom: clamp(2rem, 6vw, 4rem);
        display: block;
    }
    #reviews-1395 .cs-item-text {
        /* 16px - 25px */
        font-size: clamp(1rem, 2.6vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: bold;
        margin: 0;
        /* 24px - 64px */
        margin-bottom: clamp(1.5rem, 6vw, 4rem);
        color: var(--bodyTextColor);
    }
    #reviews-1395 .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;
        /* 8px - 24px */
        gap: clamp(0.8rem, 1.5vw, 1rem);
    }
    #reviews-1395 .cs-profile {
        /* 40px - 52px */
        width: clamp(2.5rem, 5vw, 3.25rem);
        height: clamp(2.5rem, 5vw, 3.25rem);
        margin: 0;
        border-radius: 50%;
        box-sizing: border-box;
        border: 2px solid #fff;
        /* clips image corners to make circle */
        overflow: hidden;
        position: relative;
        display: block;
    }
    #reviews-1395 .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-1395 .cs-name {
        /* 16px - 25px */
        font-size: clamp(1rem, 2.5vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0;
        color: var(--headerColor);
        display: block;
    }
    #reviews-1395 .cs-job {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.5em;
        font-weight: 400;
        margin: 0;
        color: #746f95;
        display: block;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #reviews-1395 .cs-container {
        max-width: 80rem;
    }
    #reviews-1395 .cs-item {
        grid-column: span 6;
    }
}

                                
/* platinum accent + no-image quote style */
.be-reviews .cs-topper { color: var(--platinum); }

/* remove image dependency: draw the quote mark with CSS only */
#reviews-1395 .cs-item-text {
  position: relative;
  font-weight: 700;
}
#reviews-1395 .cs-item-text::before {
  content: "“";
  position: absolute;
  left: -0.15em;
  top: -0.35em;
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 0.5;
  color: var(--primary);
  opacity: 0.25;
  pointer-events: none;
}

/* align three cards on desktop */
@media (min-width: 64rem) {
  #reviews-1395 .cs-item { grid-column: span 4; }
}

/* tidy the footer row since we removed profile images */
#reviews-1395 .cs-flex-group { gap: .5rem; }
#reviews-1395 .cs-name { display: inline-block; }
#reviews-1395 .cs-job { display: inline-block; margin-left: .35rem; color: var(--bodyTextColor); }