.home-section-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.home-section-content {
    min-width: 0;
}

.home-section-nav {
    display: none;
}

.home-section-content :is(#gold-prices, #silver-prices, #gold-gauge, #gold-calculator, #price-history, #weekly-recap, #gold-articles) {
    scroll-margin-top: 88px;
}

@media (min-width: 700px) {
    .home-section-nav {
        position: static;
        z-index: 1;
        display: block;
        height: auto;
        margin-bottom: 20px;
        padding: 14px 16px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--bg2);
        box-shadow: none;
        backdrop-filter: none;
    }

    html[data-theme="night"] nav.home-section-nav {
        background: var(--bg2);
        box-shadow: none;
    }

    .home-section-nav__title {
        display: block;
        margin-bottom: 8px;
        color: var(--text);
        font-size: 13px;
        font-weight: 900;
    }

    .home-section-nav__links {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 14px;
    }

    .home-section-nav__links a {
        display: block;
        padding: 5px 0;
        color: var(--text-muted);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.6;
        text-decoration: none;
        text-underline-offset: 4px;
    }

    .home-section-nav__links a:hover {
        color: var(--text);
        text-decoration: underline;
    }

    .home-section-nav__links a.is-active {
        color: var(--gold-dark);
        font-weight: 900;
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }

    html[data-theme="night"] .home-section-nav__links a.is-active {
        color: var(--gold-light);
    }

    .home-section-nav__links a:focus-visible {
        border-radius: 4px;
        outline: 2px solid var(--gold-dark);
        outline-offset: 3px;
    }
}

@media (min-width: 1500px) {
    .home-section-layout {
        align-items: start;
    }

    .home-section-nav {
        position: sticky;
        top: 88px;
        width: 164px;
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        margin: 0;
        padding: 8px 0;
        border: 0;
        border-inline-start: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
        transform: translateX(calc(100% + 16px));
    }

    html[data-theme="night"] nav.home-section-nav {
        background: transparent;
    }

    .home-section-nav__title {
        padding-inline: 14px;
    }

    .home-section-nav__links {
        display: block;
    }

    .home-section-nav__links a {
        padding: 5px 14px;
        border-inline-start: 2px solid transparent;
    }

    .home-section-nav__links a:hover,
    .home-section-nav__links a:focus-visible,
    .home-section-nav__links a.is-active {
        border-inline-start-color: var(--gold-dark);
    }

    html[data-theme="night"] .home-section-nav__links a.is-active {
        border-inline-start-color: var(--gold-light);
    }

    .home-section-content {
        grid-column: 1;
        grid-row: 1;
    }
}