/**
 * Testimonials Layout Styles
 */
.testimonials-section {

    .glide__arrows {
        display:none !important;
    }
    .testimonial-item {
        display: flex;
        flex-direction: column;
        .testimonial-content {
            display: block;
            text-wrap: wrap;
            padding: 6rem 2rem 0 5rem;
            position: relative;
            .testimonial-quote {
                width: 10rem;
                height: 10rem;
                color: var(--color-white);
                position: absolute;
                aspect-ratio: 1 / 1;
                top: 0;
                left: 0;
                span {
                    font-size: 4.8rem;
                    line-height: 5.4rem;
                    color: var(--color-garnet);
                    font-family: var(--serif);
                    font-weight: 700;
                    position: absolute;
                    top: 1.6rem;
                    left: 0.4rem;
                }
                &::after {
                    content:'';
                    background-image: url('/wp-content/themes/uscaa/assets/svg/slash.svg');
                    background-size: 100% auto;
                    background-repeat: no-repeat;
                    background-position: bottom right;
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 10rem;
                    height: 10rem;
                    aspect-ratio: 1 / 1;
                    z-index: 10;
                    display: inline-block;
                }
            }
        }
        .testimonial-author {
            padding-left: 6rem;
            .author-name {
                font-size: 1.6rem;
                line-height: 2.8rem;
                font-family: var(--sans);
                font-weight: 500;
                font-style: normal;
                color: var(--color-garnet);
                
            }
        }
    }

    .glide__slides {
        padding: 0 0 2.4rem 0;
    }
    .glide__arrows {
        margin: 2.4rem 0 0 0;
        color: var(--color-white);
        width: 100%;
        line-height: 1;
        display: flex;
        gap: 1.6rem;
        justify-content: flex-end;
        @media (min-width: 992px) {
            justify-content: flex-start;
        }
        button {
            background-color: var(--color-black);
            border: 2px solid var(--color-white);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 3rem;
            height: 3rem;
            color: var(--color-white);
            cursor: pointer;
            transition: transform 0.15s ease-out;
            &.glide__arrow--left {
                left: 2.4rem;
            }   
            &.glide__arrow--right {
                right: 2.4rem;
            }
            &:hover {
                transform: scale(1.1);
                background-color: var(--color-garnet);
            }
            &:active {
                transform: scale(1);
                outline: 0;
            }
        }
    }
}