.nav {
    --icon-size: 2em;
}

.nav__items-container {
    position: absolute;
    background: hsl(0, 0%, 100%);
    padding: 0.5em 2em 4em;
    right: -2em;
    top: 0em;
    width: max-content;
    display: grid;
    row-gap: 2em;
    box-shadow: var(--box-shadow-z3);
    z-index: 9;
}

.nav__btn {
    width: 2.6rem;
    height: 2.6rem;
    cursor: pointer;
}

.nav__close-btn {
    font-size: var(--fs-s);
    ;
    justify-self: end;
}


.nav__list {}

.nav__li-item {
    width: 100%;
    /* border-bottom: 1px solid var(--grey-400); */
    padding-top: 1em;
    padding-bottom: 1em;

}

.nav__item {
    display: grid;
    grid-template-columns: var(--icon-size) 1fr;
    row-gap: 0.5em;
    column-gap: 0.4em;
    align-items: center;
    text-decoration: none;
    color: black;
    font-size: var(--fs-m);
}

.nav__item-icon {
    width: var(--icon-size);
    height: var(--icon-size);
}

.nav__li-item--line {
    border-top: 1px solid var(--grey-400);
    margin-top: .5rem;
    padding-top: 2rem;
}