header {
    z-index: 20;
}

header.show {
    visibility: visible;
}

#header--mobile {
    display: none;
}

#header--desktop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%);
}

.headerD--logo {
    grid-column: 1/3;
}

.headerD--logo img {
    height: 3.5rem;
}

.headerD--pages {
    grid-column: 3/7;
}

.headerD--pages a {
    grid-column: span 1;
}

.headerD--pages #News {
    display: none;
}

.headerD--news {
    grid-column: 10/-1;
    display: flex;
    justify-content: flex-end;
}


/* TABLET */
@media only screen and (max-width: 900px) {
    .headerD--logo {
        grid-column: 1/3;
    }

    .headerD--logo img {
        height: 3rem;
    }

    .headerD--pages {
        grid-column: 3/-1;
        display: flex;
        justify-content: space-between;
    }

    .headerD--pages #News {
        display: block;
    }

    .headerD--news {
        display: none;
    }
}

/* MOBILE */
@media only screen and (max-width: 425px) {
    #header--desktop {
        display: none;
    }

    #header--mobile {
        display: grid;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 6rem;
        padding: 1rem;
        background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%);
        grid-auto-rows: min-content;
        overflow: hidden;
        transition: 300ms;
    }

    #header--mobile.open {
        height: 100vh;
        overflow: auto;
        background-color: var(--color-white);
    }

    .headerM--logo {
        grid-column: 1/3;
    }

    .headerM--logo img {
        height: 2.75rem;
    }

    .headerM--page {
        grid-column: 3/5;
        text-align: center;
    }

     #header-button {
         grid-column: 6/-1;
         margin-left: auto;
     }

     .headerM--pages {
         width: 100%;
         margin-top: 8rem;
         text-align: center;
     }

     .headerM--info {
         width: calc(100% / 6 * 4);
         margin: 8rem auto 0;
         text-align: center;
     }

     .headerM--pages * {
         display: block;
         margin-bottom: 1rem;
     }

     .headerM--info > li:not(:last-of-type) {
         margin-bottom: 3.5rem;
     }

     .headerM--info_contacts a {
         display: block;
     }
}