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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #reviews-1013 {
        padding: var(--sectionPadding);
        position: relative;
    }
    #reviews-1013 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #reviews-1013 .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-1013 .cs-card-group {
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        /* 16px - 20px */
        gap: clamp(1rem, 2.5vw, 1.15rem);
    }
    #reviews-1013 .cs-item {
        list-style: none;
        max-width: 39.375rem;
        /* 24px - 64px */
        padding: clamp(1.5rem, 4.8vw, 4rem);
        background-color: #fff;
        border: 1px solid #b4b2c7;
        /* prevents padding from adding to height and width */
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        grid-column: span 12;
        position: relative;
    }
    #reviews-1013 .cs-review {
        /* 14px - 20px */
        font-size: clamp(0.875rem, 1.6vw, 1.25rem);
        line-height: 1.5em;
        margin: 0 0 1.5rem 0;
        /* 20px - 44px */
        padding-bottom: clamp(1.25rem, 3vw, 2.75rem);
        color: var(--headerColor);
        border-bottom: 1px solid #b4b2c7;
    }
    #reviews-1013 .cs-flex-group {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        /* 12px - 20px */
        gap: clamp(0.75rem, 2vw, 1.25rem);
    }
    #reviews-1013 .cs-profile {
        /* 48px - 72px */
        width: clamp(3rem, 6vw, 4.5rem);
        height: clamp(3rem, 6vw, 4.5rem);
        border: 1px solid #b4b2c7;
        /* prevents border from adding to height and width */
        box-sizing: border-box;
        background-color: #b4b2c7;
        border-radius: 50%;
        /* clips image corners to make circle */
        overflow: hidden;
        position: relative;
        display: block;
    }
    #reviews-1013 .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-1013 .cs-name {
        /* 16px - 25px */
        font-size: clamp(1rem, 2.2vw, 1.5625rem);
        line-height: 1.2em;
        font-weight: 700;
        /* 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(--primary);
        display: block;
    }
    #reviews-1013 .cs-desc {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.6vw, 1rem);
        line-height: 1.5em;
        font-weight: 400;
        margin: 0.25rem 0 0 0;
        color: var(--headerColor);
        display: block;
    }
    #reviews-1013 .cs-background {
        width: 100%;
        height: 40%;
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
    }
    #reviews-1013 .cs-background:before {
        /* background color overlay */
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        background: #000;
        opacity: 0.5;
        top: 0;
        left: 0;
        z-index: 1;
    }
    #reviews-1013 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* Makes img tag act as a background image */
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #reviews-1013 .cs-container {
        max-width: 90rem;
    }
    #reviews-1013 .cs-item {
        grid-column: span 4;
    }
    #reviews-1013 .cs-background {
        height: 40%;
    }
}