header {
    gap: 0;
    transition: grid-template-rows var(--animation-time) ease-in-out var(--animation-time),
    gap var(--animation-time) ease-in-out var(--animation-time);
}

.special-info-big {
    grid-column: 1;
    grid-row: 1;
}

header > nav {
    position: relative;
    grid-column: 1 / 3;
    grid-row: 2;
    height: auto;
    opacity: 0;
    visibility: collapse;
    transition: opacity var(--animation-time) ease-in-out,
    visibility var(--animation-time) ease-in-out;
    overflow: hidden;
}

header > nav::before,
header > nav::after {
    content: '';

    display: block;

    position: absolute;
    top: 0;

    height: 1.2em;
    width: 1em;

    z-index: 1;

    pointer-events: none;
}

header > nav::before {
    left: 0;

    background-image: linear-gradient(to right, var(--background-color), transparent);
}

header > nav::after {
    right: 0;

    background-image: linear-gradient(to left, var(--background-color), transparent);
}

.header-toggle {
    grid-column: 2;
    grid-row: 1;
}

header > nav > ul {
    display: flex;
    gap: 0.5em;
    align-items: center;
    justify-content: space-between;
    overflow-x: auto;
    padding: 0 1em;
}

header > nav > ul > li {
    white-space: nowrap;
}

header.opened {
    grid-template-rows: 2em 1fr;
    gap: 0.5em;
    transition: grid-template-rows var(--animation-time) ease-in-out,
    gap var(--animation-time) ease-in-out;
}

header.opened > nav {
    grid-row: 2;
    opacity: 1;
    visibility: visible;
    transition: opacity var(--animation-time) ease-in-out var(--animation-time);
}