.promo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    .left {
        max-width: 835px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        h1 {
            margin-bottom: 40px;
            font-weight: 400;
            line-height: 120%;
        }
        p {
            font-size: 22px;
            color: #767676;
            strong {
                color: #000;
                font-size: 26px;
                line-height: 110%;
            }
        }
        *:last-child {
            margin-top: auto;
            line-height: 26px;
        }
    }
    .right {
        min-height: 632px;
        padding: 40px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: end;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
        img {
            position: absolute;
            inset: 0;
            height: 100%;
            z-index: -1;
            object-fit: cover;

        }
        p {
            font-size: 22px;
            color: rgba(255, 255, 255, 0.6);
            b {
                font-size: 30px;
                color: var(--main-color);
            }
        }
    }
}
.about {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 20px;
    h2 {
        font-size: 70px;
        font-weight: 400;
        line-height: 120%;
        text-transform: none;
    }
    > p {
        font-size: 22px;
        color: #767676;
        align-self: center;
    }
    > div {
        position: relative;
        display: grid;
        grid-template-rows: 702px 1fr;
        grid-template-columns: 1fr;
        gap: 30px;
        &::before {
            content: '';
            grid-area: 1/1/1/1;
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
        }
        img {
            grid-area: 1/1/1/1;
            position: absolute;
            inset: 0;
            height: 100%;
            object-fit: cover;
            z-index: -1;
            &.mob {
                display: none;
            }
        }
        > div {
            position: relative;
            display: flex;
            padding: 40px 20px;
            gap: 30px;
            flex-wrap: wrap;
            height: fit-content;
            width: fit-content;
            margin: auto auto 0;
            z-index: 1;
            > div {
                min-width: 220px;
                padding: 20px;
                background-color: rgba(255, 255, 255, .1);
                backdrop-filter: blur(20px);
                span {
                    font-size: 60px;
                    color: var(--main-color);
                    display: block;
                    margin-bottom: 10px;
                    white-space: nowrap;
                }
                p {
                    font-size: 20px;
                    color: rgba(255, 255, 255, .6);
                }
            }
        }
        > p {
            font-size: 22px;
            color: #767676;
        }
    }
}
.certificates {
    .slider {
        display: grid;
        grid-template-columns: 1fr 168px;
        align-items: center;
        gap: 50px;
        margin-bottom: 50px;
        position: relative;
        h2 {
            order: -1;
        }
        .slides-wrapper {
            grid-column: 1/-1;
            margin: 0 -100px;
            mask: linear-gradient(90deg, #00000000, #000 40px, #000 calc(100% - 40px), #00000000);
            .slides {
                display: flex;
                gap: 20px;
                width: calc(100vw - 120px);

                .slide {
                    flex: 1 0 min(890px, 100%);
                    display: grid;
                    grid-template-columns: 395px 1fr;
                    padding: 20px;
                    gap: 20px;
                    transform: translateX(50%);
                    transition: transform .5s linear;
                    > div {
                        transform: translateX(500px);
                        transition: transform .5s ease-in-out;
                    }
                    span {
                        display: contents;
                    }
                    .info {
                        display: flex;
                        flex-direction: column;
                        gap: 45px;
                        h3 {
                            font-size: 45px;
                            line-height: 120%;
                        }
                        .time p {
                            font-size: 24px;
                            color: #c0c0c0;
                            + p {
                                margin-top: 12px;
                            }
                        }
                        .content {
                            margin-top: auto;
                            p {
                                line-height: 1.18;
                            }
                        }
                    }
                    .img {
                        box-sizing: border-box;
                        border: 6px solid var(--accent-color);
                        img {
                            height: calc(100% - 12px);
                            object-position: center;
                            object-fit: contain;
                        }
                    }
                }
            }
            &.active .slides .slide {
                transform: translateX(0);
                > div {
                    transform: translateX(0);
                    transition-delay: .8s;
                }
                &:nth-of-type(1) > div {
                    transition-delay: 0s;
                    + div {
                        transition-delay: .2s;
                    }
                }
                &:nth-of-type(2) > div {
                    transition-delay: .4s;
                    + div {
                        transition-delay: .6s;
                    }
                }
            }
        }
        .controls {
			position: absolute;
			top: 50%;
			inset-inline: -40px;
			z-index: 3;
			display: flex;
			justify-content: space-between;
			pointer-events: none;
            z-index: 5;
			button {
				width: 80px;
				height: 80px;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				pointer-events: all;
				background: var(--accent-color);
				&::before {
					content: '\e902';
					display: block;
					font: 100 28px/50px 'icon';
					color: var(--main-color);
					transition: color .2s linear;
				}
				&:first-of-type::before {
					transform: scaleX(-1);
				}
			}
		}
    }
}
@media screen and (max-width: 1600px) {
    .about h2 {
        font-size: 60px;
    }
    .certificates .slider {
        .slides-wrapper {
            margin: 0;
            mask: none;
            width: 100%;
            .slides {
                width: 100%;
            }
        }
        .controls {
			left: -25px;
			right: -25px;
			button {
				width: 50px;
				height: 50px;
				&::before {
					font-size: 20px;
				}
			}
		}
    }
}
@media screen and (max-width: 1240px) {
    .promo {
        grid-template-columns: 100%;
        .left {
            display: contents;
            h1 {
                margin-bottom: 20px;
            }
            *:last-child {
                order: 2;
            }
        }
        .right {
            margin-block: 10px;
            order: 1;
        }
    }
    .about {
        grid-template-columns: 100%;
        gap: 20px;
        h2 {
            font-size: 50px;
        }
        .left {
            margin: 30px 0 10px;
        }
        > div {
            grid-template-rows: 450px 1fr;
            gap: 20px;
            > div {
                padding: 20px;
                gap: 10px;
            }
        }
    }
    .certificates .slider {
        .slides-wrapper {
            .slides {
                .slide {
                    grid-template-columns: 1fr 40%;
                    transform: none;
                    .info {
                        gap: 20px;
                        h3 {
                            font-size: 30px;
                        }
                        .time p {
                            font-size: 18px;
                        }
                    }
                }
            }
        }
        .controls {
			margin-inline: 0;
			left: -20px;
			right: -20px;
		}
    }
}
@media screen and (max-width: 768px) {
    .promo {
        .left {
            p {
                font-size: 16px;
                strong {
                    font-size: 22px;
                }
            }
            *:last-child {
                line-height: 19px;
            }
        }
        .right {
            min-height: min(500px, 89.4vw);
            padding: 20px;
            p {
                font-size: 14px;
                b {
                    font-size: 20px;
                }
            }
        }
    }
    .about {
        h2 {
            font-size: 40px;
        }
        > p {
            font-size: 16px;
        }
        > div {
            img {
                &.mob {
                    display: block;
                }
            }
            > div {
                margin: 0;
                margin-right: 120px;
                overflow: hidden;
                flex-direction: column;
                > div {
                    padding: 10px;
                    min-width: auto;
                    span {
                        font-size: 24px;
                        margin-bottom: 5px;
                    }
                    p {
                        font-size: 12px;
                    }
                }
            }
            > p {
                font-size: 16px;
            }
        }
    }
    .certificates .slider {
        grid-template-columns: 100%;
        gap: 40px;
        margin-bottom: 40px;
        .slides-wrapper {
            .slides {
                width: calc(100% - 10px);
                margin: 0;
                .slide {
                    grid-template-columns: 1fr;
                    padding: 10px;
                    transform: none;
                    > div {
                        transform: none;
                    }
                    span {
                        display: inline-block;
                    }
                    .info {
                        gap: 20px;
                        h3 {
                            font-size: 30px;
                        }
                        .time p {
                            font-size: 18px;
                        }
                        .content p {
                            font-size: 14px;
                        }
                    }
                    .img {
                        height: 409px;
                    }
                }
            }
        }
        .controls {
			left: -15px;
			right: -15px;
			button {
				width: 40px;
				height: 40px;
				&::before {
					font-size: 18px;
				}
			}
		}
    }
}