/* article START */
.single-hero + .article {
    padding-top: 0;
}

.article__row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: flex-start;
    gap: 3rem;
}

.article-nav {
    grid-column: span 4;
}

.article__content {
    grid-column: span 8;
}


.article__share {
    padding-top: 2rem;
}
/* article END */



/* article-nav START */
.article-nav {
    gap: 2rem;
    position: sticky;
    top: 12rem;
}

.article-nav__title {
    font-weight: 700;
}

.article-nav__list {
    gap: 1rem;
    color: var(--color-black-60);
}

.article-nav__list a {
    transition: 0.3s ease-out;
}

.article-nav__list a.active {
    color: var(--color-blue);
    text-shadow: 0.01rem 0.01rem;
}

.article-nav__list a:first-letter {
    text-transform: capitalize;
}

@media (hover: hover) and (pointer: fine) {
    .article-nav__list a:hover {
        color: var(--color-blue);
    }
}

@media screen and (max-width: 1024.9px) {
    .article__row {
        display: flex;
        flex-direction: column;
    }

    .article-nav {
        display: none;
    }
}

@media screen and (max-width: 767.9px) {
    .article-nav {
        gap: 3rem;
    }

    .article-nav__title {
        margin-bottom: -1rem;
    }

    .article-nav__list-wrap {
        padding-bottom: 3rem;
        border-bottom: 0.1rem solid var(--color-green-20);     
    }

    .article-nav__list {
        gap: 0.6rem;
    }

    .article__share {
        order: -1;
        padding-top: 0;
        padding-bottom: 3rem;
        border-bottom: 0.1rem solid var(--color-green-20);
    }
}
/* article-nav END */