body {
    background: var(--c-light);
}
main {
    background: var(--c-light);
}
/* header {
    position: static;
    transform: none;
    .top {
        .left {
            .drop-menu {
                > p {
                    color: var(--c-dark);
                    &::after {
                        color: var(--c-dark);
                    }
                }
            }
            .burger {
                span, &::before, &::after {
                    background: var(--c-dark);
                }
            }
        }
        .logo {
            p {
                color: var(--c-dark);
            }
        }
        .right {
            form {
                background: rgba(2, 17, 27, .08);
                input {
                    color: var(--c-dark);
                    &::placeholder {
                        color: var(--c-dark);
                    }
                }
                .btn {
                    color: var(--c-dark);
                }
            }
            .cart {
                &::before {
                    color: var(--c-dark);
                }
            }
        }
    }
    .bottom {
        nav {
            ul {
                li {
                    a {
                        color: var(--c-dark);
                    }
                }
            }
        }
        &::before, &::after {
            background: var(--c-dark);
        }
    }
} */
section.u-info {
    margin-top: 30px;
    margin-bottom: 70px;
    h1 {
        font-family: drukcyr;
        font-weight: 700;
        font-style: Bold;
        font-size: 64px;
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 80px;
    }
    .content {
        .top {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;
            padding-bottom: 20px;
            position: relative;
            .btn {
                color: var(--c-dark);
                padding: 5px 20px;
                font-size: 24px;
                font-weight: 500;
                border-radius: 20px;
                &.active {
                    background: var(--c-dark);
                    color: var(--white);
                }
            }
            &::after {
                position: absolute;
                content: '';
                width: 100%;
                left: 0;
                bottom: 0;
                height: 2px;
                background: #d5d5d5;
            }
        }
        .items {
            margin-top: 50px;
            position: relative;
            .item {
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                visibility: hidden;
                transition: .2s linear;
                .el {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    h2 {
                        margin-bottom: 10px;
                        font-weight: 600;
                        font-size: 24px;
                        color: var(--c-dark);
                    }
                    p {
                        font-size: 14px;
                        color: var(--dark-gray);
                    }
                }
                &.gr-3 {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 30px;
                }
                &.active {
                    position: static;
                    opacity: 1;
                    visibility: visible;
                }
            }
        }
    }
}
@media screen and (max-width: 1279px) {
    section.u-info {
        h1 {
            margin-bottom: 50px;
            line-height: 1;
        }
        .content {    
            .top {
                gap: 15px;
                justify-content: start;
                .btn {
                    font-size: 16px;
                }
            }
            .items {
                margin-top: 30px;
                .item {
                    max-width: 800px;
                    align-items: center;
                    .el {
                        h2 {
                            margin-bottom: 5px;
                        }
                    }
                    &.gr-3 {
                        display: flex;
                        flex-direction: column;
                        gap: 35px;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 767px) {
    section.u-info {
        margin-bottom: 5px;
        margin-top: 20px;
        h1 {
            margin-bottom: 40px;
            font-size: 40px;
        }
        .content {    
            .top {
                justify-content: center;
                gap: 10px;
                .btn {
                    font-size: 14px;
                }
            }
            .items {
                margin-top: 20px;
                .item {
                    max-width: 500px;
                    .el {
                        h2 {
                            font-size: 20px;
                            margin-bottom: 0;
                        }
                    }
                    &.gr-3 {
                        gap: 25px;
                    }
                }
            }
        }
    }
}