/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
# # # # # # # # # # # #  GENERAL LIST STYLES   # # # # # # # # # # #
# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

:root {
    --list-section-title-text-font-letter-spacing: -1.2px !important;
}

.list-item-media-inner {
    border-radius: var(--br-med) !important;
}

/* # # # # CAROUSEL LIST ARROWS # # # # */

.arrows-bottom {
    grid-gap: 8px;
}

.arrows-bottom-wrapper {
    display: flex;
    align-items: center;
}

.user-items-list-item-container.user-items-list-carousel {
    display: flex;
    flex-direction: column-reverse;
}

.desktop-arrows.arrows-bottom-wrapper {
    margin-top: 0rem !important;
    margin-bottom: 2vw !important;
}

.user-items-list-carousel__arrow-icon {
    display: none !important;
}

.user-items-list-carousel__arrow-button {
    width: 40px;
    height: 40px;
    background: var(--list-section-carousel-arrow-background-color);
}

.user-items-list-carousel__arrow-button::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-sharp-regular);
    content: "\f061";
    opacity: 1 !important;
    transition: var(--trans-1) !important;
    color: var(--list-section-carousel-arrow-color);
}

.user-items-list-carousel__arrow-icon-background-area,
.user-items-list-carousel__arrow-button--left::before,
.user-items-list-carousel__arrow-button--right::before,
.user-items-list-carousel__arrow-button {
    transition: var(--trans-1) !important;
}

.user-items-list-carousel__arrow-button--left::before {
    content: "\f104";
}

.user-items-list-carousel__arrow-button--right::before {
    content: "\f105";
}

.user-items-list-carousel__arrow-button .user-items-list-carousel__arrow-icon-background-area {
    opacity: 0 !important;
}

.user-items-list-carousel__arrow-button:hover.user-items-list-carousel__arrow-button--right::before,
.user-items-list-carousel__arrow-button:hover.user-items-list-carousel__arrow-button--left::before {
    color: var(--list-section-carousel-arrow-background-color) !important;
}

.user-items-list-carousel__arrow-button:hover {
    background: var(--list-section-title-color);
}

/* # # # # LIST TEXT STYLING # # # # */
.user-items-list .list-section-title {
    margin-left: 0rem;
    padding-left: 0rem;
    padding-bottom: 0rem !important;
    height: fit-content !important;
}
.list-item-content__description {
    letter-spacing: unset !important;
}


 
/* # # # # LIST BUTTONS # # # # */

.user-items-list-carousel .list-item-content__button, .user-items-list-simple .list-item-content__button {
    font-size: var(--cta-size) !important;
}


/* # # # # LIST IMAGES # # # # */
.user-items-list-carousel__media-inner {
    border-radius: var(--br-med);
}


/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
# # # # # # # # # # # TESTIMONIAL STYLE LISTS  # # # # # # # # # # # 
# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */

/*Laptops & above*/
@media only screen and (min-width: 62em) {
    section[id*="reviews"] {
        .user-items-list {
            padding-top: 2vmax !important;
        }
    }
}

section[id*="reviews"] {
    
    .user-items-list-carousel .list-item-content__description {
        font-size: var(--p1-size) !important;
        letter-spacing: var(--body-font-letter-spacing);

    }

    .user-items-list-carousel .list-item-content__description strong,
    h2.list-item-content__title {
        font-size: var(--p2-size) !important;
        font-weight: var(--body-font-font-weight) !important;
        line-height: ~"calc(var(--body-font-line-height) *0.5)" !important;
    }

    li.user-items-list-carousel__slide.list-item {
        display: grid;
        grid-template-columns: 76px 1fr;
        grid-gap: 1rem;
    }

    .list-item-content__description {
        margin-top: 0px !important;
    }

    .list-item-content {
        margin-top: 1.5rem;
    }
}

/*Phones & Tablets*/
@media only screen and (max-width: 62em) {
    section[id*="reviews"] {
        .user-items-list-carousel[data-alignment-vertical="stretch"] .user-items-list-carousel__slide {
            align-self: start;
        }

        .user-items-list-carousel__media-container {
            margin-bottom: 0rem !important;
        }

        .user-items-list-carousel .list-item-content__description strong,
        h2.list-item-content__title {
            font-size: var(--p1-size) !important;
            font-weight: var(--body-font-font-weight) !important;
            line-height: var(--body-font-line-height) !important;
        }

        li.user-items-list-carousel__slide.list-item {
            display: grid;
            grid-template-columns: 1fr !important;
            grid-gap: 0rem;
        }

        .user-items-list-carousel__media-container {
            width: 30% !important;
        }

        .user-items-list-carousel[data-media-alignment="left"] .user-items-list-carousel__media-container {
            margin-left: auto;
        }

        .user-items-list-carousel[data-body-alignment="left"] .list-item-content__description,
        .user-items-list-carousel[data-title-alignment="left"] .list-item-content__title {
            text-align: center;
            max-width: 100% !important;
        }
    }
}

/* # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #
# # # # # # # # # # # # # #  SIMPLE LISTS  # # # # # # # # # # # # #
# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # */
.user-items-list-simple {
    .list-item-media {
        position: relative;
    }
    .list-item-media .list-item-content__title {
        font-size: var(--h3-size) !important;
        position: absolute;
        bottom: 0;
        padding: calc(var(--sqs-site-gutter) * 0.35) calc(var(--sqs-site-gutter) * 0.5);
        /*max-width: 70% !important;*/
    }
    .list-item-content__description {
        font-size: var(--p1-size) !important;
        letter-spacing: var(--body-font-letter-spacing);
    }
}

/*SIMPLE LIST*/
section[id*="simple-list"] .list-section-title {
    padding-left: var(--sqs-site-gutter) !important;
    padding-right: var(--sqs-site-gutter) !important;
    margin-bottom: 1.5rem;
}

