section.about {
    display: flex;
    gap: 100px;
    justify-content: space-between;
    .info {
        p {
            margin-top: 10px;
        }
        .btn {
            margin-top: 80px;
        }
    }
    .numbers {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 120px;
        .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            .number {
                font-size: 48px;
                color: var(--c-white);
                font-family: var(--font-main);
                font-weight: var(--fw-semibold);
                .count {
                    font-size: inherit;
                    color: inherit;
                    font-weight: inherit;
                    font-family: inherit;
                }
            }
            .text {
                text-align: center;
                max-width: 220px;
                font-weight: var(--fw-light);
            }
        }
    }
}

section.catalog {
    display: flex;
    flex-direction: column;
    .see-more {
        align-self: center;
        margin-top: 40px;
    }
}

section.portfolio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(12, 20px); 
    gap: 40px 40px;
    .head {
        grid-row: span 3 / span 3;
        max-width: 430px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .item {
        border-radius: 20px;
        position: relative;
        overflow: hidden;
        h3 {
            font-size: 26px;
            position: absolute;
            right: 30px;
            bottom: 25px;
            z-index: 9;
            &::after {
                content: '';
                position: absolute;
                width: calc(100%);
                height: 2px;
                background: var(--c-white);
                left: 0;
                bottom: 0;
            }
        }
        &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: rgba(7, 7, 7, 0.3);
            z-index: 2;
        }
        &:nth-child(2) {
            grid-row: span 9 / span 9;
            grid-column-start: 1;
            grid-row-start: 4;
        }
        &:nth-child(3) {
            grid-row: span 6 / span 6;
            grid-column-start: 2;
            grid-row-start: 1;
        }
        &:nth-child(4) {
            grid-row: span 6 / span 6;
            grid-column-start: 2;
            grid-row-start: 7;
        }
        &:nth-child(5) {
            grid-row: span 10 / span 10;
            grid-column-start: 3;
            grid-row-start: 1;
        }
    }
    .see-all {
        grid-column-start: 3;
        grid-row-start: 11; 
        grid-row-end: span 2;
        width: 100%;
        border: 1px solid var(--c-primary);
        border-radius: 20px;
        color: var(--c-primary);
        position: relative;
        &::after {
            position: absolute;
            font-family: icon;
            content: '\e90f';
            font-size: 14px;
            top: 14px;
            right: 16px;
            transition: .2s linear;
        }
    }
}

section.workflow {
    padding: 100px;
    border-radius: 40px;
    background: var(--c-dark);
    .items {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
        gap: 80px 40px;
        justify-content: space-between;
        margin-top: 100px;
        .item {
            display: flex;
            flex-direction: column;
            h3 {
                font-size: 36px;
                position: relative;
                z-index: 1;
                font-weight: var(--fw-regular);
                margin-bottom: 10px;
                span {
                    position: absolute;
                    font-size: 68px;
                    font-family: var(--font-main);
                    font-weight: var(--fw-semibold);
                    bottom: -10px;
                    left: 0;
                    color: var(--c-primary);
                    opacity: .4;
                    z-index: 0;
                }
            }
            p {
                font-size: 16px;
                font-weight: var(--fw-light);
            }
        }
    }
}

section.reviews {
    .head {
        display: grid;
        grid-template-columns: 800px 1fr;
        gap: 40px;
        margin-bottom: 40px;
        .navigation {
            display: flex;
            margin: auto 0 0 auto;
            .btn {
                background: var(--c-dark);
                width: 60px;
                min-width: 60px;
                height: 60px;
                border-radius: 40px;
                &.prev {
                    &::before {
                        content: '\e907';
                    }
                }
                &.next {
                    &::before {
                        content: '\e908';
                    }
                }
                &::before {
                    font-size: 15px;
                    font-family: icon;
                    color: var(--c-light);
                }
                &:last-child {
                    margin-left: 10px;
                }
            }
        }
    }
    .swiper {
        .swiper-wrapper {
            .swiper-slide {
                background: var(--c-dark);
                border-radius: 20px;
                padding: 40px 80px 40px 40px;
                min-height: 460px;
                height: 100%;
                display: flex;
                flex-direction: column;
                .top {
                    display: flex;
                    align-items: center;
                    margin-bottom: 40px;
                    .profile {
                        margin-right: 20px;
                        width: 60px;
                        min-width: 60px;
                        height: 60px;
                        border-radius: 40px;
                        overflow: hidden;
                        display: flex;
                        &.t {
                            align-items: center;
                            justify-content: center;
                            p {
                                font-size: 30px;
                                font-weight: var(--fw-regular);
                                text-transform: uppercase;
                            }
                            &.lilac {
                                background: #E3C8FF;
                                p {
                                    color: var(--c-white);
                                }
                            }
                            &.l-green {
                                background: #D3F7E3;
                                p {
                                    color: var(--c-dark);
                                }
                            }
                            &.blue {
                                background: #aaf4f1;
                                p {
                                    color: var(--c-dark);
                                }
                            }
                            &.orange {
                                background: #dead86;
                                p {
                                    color: var(--c-white);
                                }
                            }
                            &.pink {
                                background: #e699ff;
                                p {
                                    color: var(--c-white);
                                }
                            }
                        }
                    }
                    .name {
                        font-size: 28px;
                        font-family: var(--font-main);
                    }
                    .rate {
                        margin-left: auto;
                        margin-right: 0;
                        display: flex;
                        align-items: center;
                        p {
                            font-size: 18px;
                            margin-right: 10px;
                        }
                        .stars {
                            display: flex;
                            gap: 2px;
                            align-items: center;
                            span {
                                display: flex;
                                &::before {
                                    font-family: icon;
                                    content: '\e905';
                                    font-size: 12px;
                                    color: var(--c-primary);
                                }
                            }
                        }
                    } 
                }
                .content {
                    p {
                        font-size: 18px;
                    }
                }
                .btn {
                    margin: auto 0 0 auto;
                    width: 260px;
                }
            }
        }
    }
}

@media screen and (max-width: 1759px) {
    section.about {
        .numbers {
            gap: 40px 80px;
            .item {
                .number {
                    font-size: 42px;
                }
                .text {
                    font-size: 15px;
                    font-weight: var(--fw-light);
                    width: 100%;
                }
            }
        }
    }
    section.portfolio {
        gap: 20px;
        .item {
            h3 {
                font-size: 22px;
            }
        }
    }
    section.workflow {
        padding: 70px 60px;
        .items {
            margin-top: 80px;
            gap: 80px;
            grid-template-columns: repeat(2, 1fr);
            .item {
                h3 {
                    font-size: 30px;
                    span {
                        font-size: 52px;
                        top: -24px;
                    }
                }
                p {
                    font-size: 15px;
                }
            }
        }
    }
    section.reviews {
        .head {
            .navigation {
                .btn {
                    width: 52px;
                    height: 52px;
                    min-width: 52px;
                }
            }
        }
        .swiper {
            .swiper-wrapper {
                .swiper-slide {
                    .btn {
                        width: 220px;
                    }
                    .top {
                        .name {
                            font-size: 22px;
                        }
                        .profile {
                            width: 52px;
                            height: 52px;
                            min-width: 52px;
                        }
                    }
                    .content {
                        p {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1279px) {
    section.about {
        flex-direction: column;
        gap: 60px;
        .info {
            display: grid;
            grid-template-columns: 1fr 220px;
            gap: 0 80px;
            .btn {
                grid-column: 2;
                grid-row: 1;
                margin-top: 0;
                width: 220px;
            }
            .desc {
                grid-column: 1;
                max-width: 500px;
            }
        }
        .numbers {
            .item {
                .number {
                    font-size: 36px;
                }
            }
        }
    }
    section.portfolio {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(12, 30px);
        .head {
            grid-row: span 2 / span 2;
        }
        .item {
            &:nth-child(2) {
                grid-row: span 4 / span 4;
                grid-column-start: 1;
                grid-row-start: 3;
            }
            &:nth-child(3) {
                grid-row: span 6 / span 6;
                grid-column-start: 1;
                grid-row-start: 7;
            }
            &:nth-child(4) {
                grid-row: span 4 / span 4;
                grid-column-start: 2;
                grid-row-start: 1;
            }
            &:nth-child(5) {
                grid-row: span 6 / span 6;
                grid-column-start: 2;
                grid-row-start: 5;
            }
        }
        .see-all {
            grid-row: span 2 / span 2;
            grid-column-start: 2;
            grid-row-start: 11;
            /* max-width: 240px; */
        }
    }
    section.reviews {
        .head {
            grid-template-columns: 1fr 120px;
            .title {
                max-width: 500px;
            }
        }
        .swiper {
            .swiper-wrapper {
                .swiper-slide {
                    padding: 40px;
                    min-height: 280px;
                    .btn {
                        margin-top: 40px;
                    }
                    .top {
                        .profile {
                            width: 46px;
                            height: 46px;
                            min-width: 46px;
                            &.t {
                                p {
                                    font-size: 24px;
                                }
                            }
                        }
                        .name {
                            font-size: 20px;
                        }
                    }
                    .content {
                        max-width: 800px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 767px) {
    section.about {
        .info {
            display: flex;
            flex-direction: column;
            p {
                margin-top: 0;
            }
            .btn {
                margin-top: 20px;
            }
        }
        .numbers {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            .item {
                align-items: start;
                .text {
                    text-align: left;
                }
            }
        }
    }

    section.catalog {
        .see-more {
            margin-top: 20px;
        }
    }

    section.portfolio {
        display: flex;
        flex-direction: column;
        .item {
            &:nth-child(2) {
                aspect-ratio: 1/1;
            }
            &:nth-child(3) {
                aspect-ratio: 2/1;
            }
            &:nth-child(4) {
                aspect-ratio: 2/1;
            }
            &:nth-child(5) {
                aspect-ratio: 1/1;
            }
        }
        .see-all {
            /* max-width: 260px; */
            align-self: center;
            height: 80px;
        }
    }

    section.workflow {
        padding: 60px 30px;
        .items {
            grid-template-columns: 1fr;
            gap: 60px;
            .item {
                h3 {
                    font-size: 24px;
                    span {
                        font-size: 42px;
                        top: -20px;
                    }
                }
            }
        }
    }

    section.reviews {
        .head {
            grid-template-columns: 1fr;
            gap: 20px;
            margin-bottom: 10px;
            .navigation {
                .btn {
                    width: 44px;
                    height: 44px;
                    min-width: 44px;
                    &:last-child {
                        margin-left: 8px;
                    }
                }
            }
        }
        .swiper {
            .swiper-wrapper {
                .swiper-slide {
                    padding: 30px 20px;
                    .top {
                        .profile {
                            width: 44px;
                            height: 44px;
                            min-width: 44px;
                            margin-right: 10px;
                            &.t {
                                p {
                                    font-size: 20px;
                                    font-weight: var(--fw-regular);
                                }
                            }
                        }
                        .name {
                            font-size: 18px;
                        }
                        .rate {
                            p {
                                font-size: 16px;
                                margin-right: 6px;
                            }
                        }
                    }
                    .content {
                        p {
                            font-size: 15px;
                        }
                    }
                }
            }   
        }
    }
}

@media screen and (hover: hover) {
    section.portfolio {
        .see-all:hover {
            background: var(--c-dark);
            &::after {
                transform: rotate(45deg);
            }
        }
    }
}