@media (max-width: 1199.98px) {
    * {
        scrollbar-width: 0;
    }

    *::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

@media (max-width: 575.98px) {
    html {
        font-size: calc(1vw / 5);
    }

    h1 {
        font-size: 36rem;
    }

    h2 {
        font-size: 36rem;
    }

    h3 {
        font-size: 26rem;
    }

    .bar__menu {
        width: 52rem;
        height: 52rem;
        border-radius: 50%;
        border: 2rem solid var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
        flex: 0 0 auto;
        z-index: 1;
    }

    .bar__menu span {
        display: flex;
        width: 50%;
        height: 2rem;
        background-color: var(--accent);
        position: relative;
        transition: background-color .4s ease;
    }

    .bar__menu span::before, .bar__menu span::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2rem;
        background-color: var(--accent);
        transition: transform .4s ease;
    }

    .bar__menu span::before {
        top: -5rem;
    }

    .bar__menu span::after {
        top: 5rem;
    }

    .bar__menu.active span {
        background-color: transparent;
    }

    .bar__menu.active span::after {
        top: 0;
        transform: rotate(225deg) translateY(-50%);
    }

    .bar__menu.active span::before {
        top: 0;
        transform: rotate(-225deg) translateY(-50%);
    }

    .header__nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(247.74deg, #445B67 8.57%, #191F23 86.92%);
        transition: transform .4s ease;
        transform: translateY(-100%);
    }

    .header__list {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        height: 100%;
        padding: 150rem 15rem;
        overflow-y: auto;
        row-gap: 30rem;
        text-align: center;
    }

    .header__link {
        text-transform: uppercase;
        font-size: 22rem;
    }

    .header__nav.open {
        display: block;
    }

    .header__nav.active {
        transform: translateY(0);
    }

    .header__content {
        gap: 10rem;
    }

    .header__title {
        font-size: 36rem;
    }

    .btn.min {
        padding: 10rem 20rem;
    }

    .block {
        height: auto;
    }

    .block__title {
        text-align: center;
    }

    .block--primary h1 {
        font-size: 70rem;
        margin-top: 50rem;
        text-align: left;
    }

    .block--primary .block__image {
        position: static;
        transform: none;
        height: auto;
        width: 100%;
    }

    .block--primary .block__container, .block--usage .block__container {
        width: 100%;
        height: auto;
        padding-left: 0;
    }

    .block__note {
        width: 100%;
    }

    .block--hangover .block__description {
        width: 100%;
        margin-left: 0;
    }

    .block--hangover .block__description-elem {
        width: 100%;
    }

    .block__components, .block__steps {
        grid-template-columns: repeat(1, 1fr);
        row-gap: var(--gap);
    }

    .block__component-more {
        display: block;
    }

    .block__component-list {
        display: none;
    }

    .block__features {
        grid-template-columns: repeat(2, 1fr);
    }

    .block__steps::after {
        display: none;
    }

    .block__image--person {
        display: none;
    }

    .block__step-icon {
        width: 160rem;
        height: 160rem;
    }

    .block__step::after {
        left: 100rem;
        top: 0;
    }

    .block--tertiary .block__title {
        margin-bottom: 50rem;
    }

    .block__dose-note {
        width: 100%;
        text-align: center;
    }

    .block--usage .block__image {
        display: none;
    }

    .block__table td {
        padding: 15rem;
    }

    .block--hangover .block__text {
        padding-left: 0;
    }

    .block__bottles img {
        height: auto;
    }

    .block__product {
        flex-direction: column;
    }

    .block__product .block__description {
        margin-left: 0;
    }

    .block__product-image {
        display: none;
    }

    .block__product-diagram {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .block__product-diagram img {
        height: auto;
    }

    .block--oils__wrap {
        grid-template-columns: repeat(1, 1fr);
    }

    .block__charts {
        flex-direction: column;
    }

    .block__charts-item.full .block__charts-wrap {
        grid-template-columns: repeat(1, 1fr);
    }

    .block__charts-item.full {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .block__charts-item.full .block__charts-text {
        width: 100%;
    }

    .articles {
        grid-template-columns: repeat(1, 1fr);
    }

    .block-show {
        padding: 30rem 0;
    }

    .block-show .block__title {
        text-align: left;
    }

    .block__heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .faq {
        grid-template-columns: repeat(1, 1fr);
    }

    .faq__item-block {
        height: auto;
    }

    .faq__item .faq__answer {
        position: static;
        max-height: max-content;
    }

    .modal .modal__body {
        min-width: 90%;
    }

    .modal__inner {
        padding: 30rem;
    }

    .btn-more {
        display: block;
    }

    .form-bottom {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }

    .form-bottom .btn {
        width: 100%;
        max-width: 100%;
    }

    .form-group {
        flex-direction: column;
    }

    .footer__content {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (min-width: 1920.98px) {
    html {
        font-size: calc(1vw / 20);
    }
}

@media not (hover: none) {
    a:hover:not(.btn, .article__link) {
        color: var(--accent);
    }

    .btn:hover {
        background-color: #104F6B;
    }

    .article__link:hover {
        color: #fff;
    }
}