@media screen and (min-width: 769px) {
    .header li:hover {
        opacity: .7;
        transition: .2s ease-in-out
    }

    .socials a:hover {
        transform: translateY(-5px);
        transition: .3s ease-in-out
    }

    .buttons a:hover {
        opacity: .7;
        transition: .3s ease-in-out
    }

    .aside-image:hover {
        opacity: .2;
        transition: .3s ease-in-out
    }

    .link:hover {
        color: #0e4d18;
        text-decoration: underline;
        transition: .3s ease-in-out
    }

    .aside-item:hover {
        opacity: .4;
        transition: .3s ease-in-out
    }

    .order-button:hover {
        background: #007cd0;
        transition: .3s ease-in-out
    }
}

@media screen and (max-width: 1250px) {
    .header-top-left {
        display: none
    }

    .aside, .header-top-info, .header-top-actions, .navigation {
        display: none
    }

    .content .container {
        display: grid;
        grid-template-columns:810px;
        gap: 15px;
        justify-content: center
    }

    .type, h1.article-title {
        padding-left: 0
    }
}

@media screen and (max-width: 1023px) {
    .header-top-right ul {
        li:nth-child(1), li:nth-child(2), li:nth-child(4), li:nth-child(5) {
            display: none
        }
    }

    .content .container > .wrapper {
        display: grid;
        grid-template-columns:100%;
        gap: 30px;
        justify-content: center
    }

    .article-wrapper {
        grid-template-columns:100%
    }

    .article .wrap {
        max-width: 100%;
        padding-left: 0
    }

    .socials {
        display: none
    }

    h2.article-title {
        font-size: 32px;
        line-height: 116%;
        margin-bottom: 0
    }

    .article-info .socials-mob {
        display: block
    }

    .article-text.padding {
        padding-left: 0
    }

    .expert-block .head {
        flex-direction: column
    }

    .expert-block {
        padding: 20px 14px
    }

    .expert-block .article-text {
        font-size: 16px
    }

    .gray-block, .red-block, .green-block, .action-block {
        padding: 16px
    }
}

@media screen and (max-width: 830px) {
    .socials {
        display: none
    }

    .content .container {
        grid-template-columns:100%
    }

    .content .article-wrapper {
        display: grid;
        grid-template-columns:100%;
        gap: 30px
    }
}

@media screen and (max-width: 768px) {
    .header-bottom-left {
        display: none
    }

    .breadcrumbs {
        padding-top: 20px;
        margin-bottom: 15px
    }

    .form-block {
        padding: 50px 5px 50px 5px;
    }

    .form-block-title, .form-block-text {
        max-width: 300px;
        margin: 0 auto 30px
    }

    .form-block > .wrapper {
        max-width: 355px;
        margin: 0 auto
    }

    .form-block-text {
        font-size: 16px
    }

    .pp {
        padding: 25px 0
    }

    .pp .container {
        flex-direction: column;
        gap: 10px
    }

    .footer-block {
        justify-content: flex-end
    }

    .modal-wrapper {
        max-width: 300px;
        left: calc(50% - 150px)
    }

    .buttons {
        display: flex
    }

    .mob {
        display: block
    }

    .desk {
        display: none
    }
}

@media screen and (max-width: 560px) {
    .header {
        display: none
    }

    .header.mobile {
        display: block;
        width: 100%;

        img {
            width: 100%
        }
    }
}