﻿.topics-page {
}

.topics-page__main {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 10rem;
    margin-bottom: 4rem;
}

.topics-page__main nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.topics-page__main nav ul li {
    margin-bottom: 1rem;
}

.topics-page__main nav ul li a {
    color: var(--color-text);
    text-transform: uppercase;
    font-size: .9rem;
}

.topics-body__featured-articles,
.topics-body__more-articles,
.topics-body__get-started {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.topics-body__get-started {
    margin-bottom: 4rem;
}

.topics-body-get-started__other .note {
    margin-bottom: 1rem;
}

.topics-body__featured-expert {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.topics__topic {
    display: flex;
    flex-direction: column;
}

.topics__topic .article-card {
    flex-grow: 1;
}

.topics-body__topics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 6rem;
}

.topic__description {
    margin-bottom: 1rem;
}

.topics-body__products-and-tools__wrapper {
    margin-top: 4rem;
}

.topics-body__products-and-tools {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.topics-body__products-and-tools__video-wrapper {
    margin-top: 4rem;
}

.topics-body__products-and-tools-videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.products-and-tools__category {

}

.products-and-tools-category__item {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

@media only screen and (max-width: 1024px) {
    .topics-page__main {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .topics-page__main nav ul {
        text-align: center;
    }

    .topics-page__main nav ul li {
        display: inline-block;
        margin-right: 1rem;
    }
}