:where(.site-header) {
    position: absolute;
    width: 100%;

    .header-wrapper {
        position: relative;
        width: 100%;
        display: grid;
        justify-content: space-between;
        grid-template-columns: 45rem 1fr;
        padding-block: 1rem 0;
        align-items: center;
        column-gap: 2rem;


        .header-button {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-brand-orange);
            padding: 1rem;
            border-radius: 50%;
            aspect-ratio: 1;
            border: solid 0.1rem var(--color-brand-orange);
            transition: all 250ms ease-in-out;
            max-width: fit-content;

            & > svg {
                object-fit: contain;
                width: 2rem;
                height: 2rem;
                transition: all 250ms ease-in-out;

                & path {
                    transition: all 250ms ease-in-out;
                }
            }

            &:where(:hover, :focus-within) {
                cursor: pointer;
                border-color: var(--color-primary-white);
            }


        }

    }
}



@media screen and (max-width: 1250px) {
    .site-header {
        .header-wrapper {
            grid-template-columns: 30rem 1fr;
        }
    }
}


@media screen and (width <= 45em) {
    .site-header {
        .header-wrapper {
            grid-template-columns: 2fr 10rem;
            padding-block: 0;
        }

        :where(.main-nav-wrap, .utility-nav-wrap) {
            display: none;
        }

        .logo {
            padding-top: 3rem;
        }
    }
}