#reviews {
    position: relative;
    overflow: hidden;
    width: 1760px;
    max-width: 100%;
    margin-inline: auto;  

    @media only screen and (max-width: 980px) {
        width: 90%;
        max-width: 100%;
        margin-inline: auto;
    }


    .context {
        margin-bottom: 64px;
        display: flex;
        gap: 30px;
        justify-content: center;
        align-items: center;

        @media only screen and (max-width: 980px) {
            margin-bottom: 32px;
        }

        span {
            text-transform: uppercase;
            font-weight: 600;
            font-size: 22.5px;

            @media only screen and (max-width: 980px) {
                font-size: 18px;
            }

        }

        span:nth-child(1) {
            color: var(--primary);
        }

        span:nth-child(2) {
            font-weight: normal;
            font-size: 30px;
        }

        span:nth-child(3) {
            color: var(--text);
        }
    }

    .wrapper {
        display: grid;
        grid-template-columns: 1fr 2fr;
        align-items: center;
        gap: 80px;
        position: relative;

        @media only screen and (max-width: 980px) {
            grid-template-columns: 1fr;
        }
    }

    .images {
        background: #171717;
        border-radius: 46px;
        padding: 64px;
        border: 2px dashed #3e4047;
        overflow: hidden;

         img {
            aspect-ratio: 1/1;
            border-radius: 32px;
            width: 100%;
            height: 100%;
            object-fit: cover;          
            position: relative;   
        }  

        @media only screen and (max-width: 980px) {
            display: none;
        }

    }

    .list { 
        display: grid;

        .item {
            grid-column: 1 / -1;
            grid-row: 1 / -1;
            opacity: 0 !important;
            width: 100% !important;

            &.swiper-slide-active {
                opacity: 1 !important;
            }

            &:first-child .nav-arrow.left {
                opacity: 0.3;
            }

            &:last-child .nav-arrow.right {
                opacity: 0.3;
            }
        }
    }

    .content {
        flex: 1;
        position: relative;
    }

    .quote-icon {
        position: absolute;
        top: -20px;
        right: 0;
        font-size: 80px;
        color: var(--primary);
        font-weight: bold;
        line-height: 1;
        opacity: 0.8;

        @media only screen and (max-width: 980px) {
            display: none;        
        }
    }


    .heading {
        font-size: 56px;
        font-weight: 700;
        color: #ffffff;
        line-height: 1.2;
        margin-top: 0px;
        margin-bottom: 30px;
        letter-spacing: -0.02em;

        @media only screen and (max-width: 980px) {
            line-height: 1;
            font-size: 46px;            
        }

    }

    .quote {
        font-size: 1.1rem;
        line-height: 1.6;
        color: #b0b0b0;
        margin-bottom: 40px;
    }

    .author {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .author-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        border: 3px solid var(--primary);
    }

    .author-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .author-info {
        flex: 1;
        display: grid;
        gap: 7px;
    }

    .author-name {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--primary);
        margin-bottom: 2px;
    }

    .author-title {
        color: #b0b0b0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .navigation {
        display: flex;
        gap: 10px;
    }

    .nav-arrow {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        border: 1px solid var(--primary);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        font-size: 30px;

        &:hover {
            background: var(--primary);
            border-color: var(--primary);
            color: #000;
        }

        &:active {
            transform: scale(0.95);
        }

        &[disabled] {
            opacity: 0.3;
            pointer-events: none;
        }

    }
}