.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-light);
    box-shadow: var(--shadow-base);

    &__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 2rem;
        padding-top: 1rem;
        padding-bottom: 1rem;

        @include lg {
            grid-template-columns: 1fr auto;
        }
    }

    &__logo {
        justify-self: start;

        a {
            display: flex;
            align-items: center;
        }

        svg,
        img {
            display: block;
            height: 2rem;
            width: auto;
        }
    }

    &__menu {
        justify-self: center;

        @include lg {
            display: none;
        }

        ul {
            display: flex;
            align-items: center;
            gap: 2rem;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            font-weight: 500;
            transition: opacity 0.2s ease;

            &:hover {
                opacity: 0.7;
            }
        }
    }

    &__cta {
        display: flex;
        justify-self: end;
        align-items: center;
        gap: 1rem;
    }

    &__mobile-menu-button {
        @include reset-button;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        svg {
            width: 1.5rem;
            height: 1.5rem;
        }
    }
}
