:root {
    --grid-category-columns: 2;
}
section.grid-category {
    /* Use negative margin with padding so the overflow:hidden goes full-bleed */
    margin-left: calc(-1 * var(--content-padding-horz));
    margin-right: calc(-1 * var(--content-padding-horz));
    padding-left: var(--content-padding-horz);
    padding-right: var(--content-padding-horz);
}
.grid-category-outer {
    /* padding: 0 0 0 30px; /* NOT SURE WHY THIS WAS HERE—DOESN'T SEEM NEEDED. TODO: DELETE IN A LATER VERSION */
}
.grid-category-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 50px;
    align-items: start;
}

.grid-category-content {
    width: calc((100% - 50px) * 0.4);
    flex: 0 0 auto;

    /* Add offset padding on top so when this element is sticky, there is some spacing between the header and the element's content */
    margin-top: calc(-1 * var(--content-margin-bottom)) ;
    padding-top: var(--content-margin-bottom);
}
.grid-category-heading {
    margin: 0 0 1.5625rem 0;
}
.grid-category .content-cta:has(*) {
    margin-top: 2.1875rem;
}

.grid-category-page-cards {
    width: calc((100% - 50px) * 0.6);
    flex: 0 0 auto;
}

.grid-category-page-cards .cards-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}
.grid-category-page-cards .cards-grid .card {
    width: calc((100% - (20px * (var(--grid-category-columns) - 1))) / var(--grid-category-columns));
    flex: 0 0 auto;
}

.featured-pages-cards {}
.featured-pages-cards .cards-grid {}
.featured-pages-cards .cards-grid .card {}

.more-pages-cards-heading {
    margin: 1.8rem 0 0.9rem 0;
}
.more-pages-cards {}
.more-pages-cards .cards-grid {}
.more-pages-cards .cards-grid .card .card-inner {
    padding-bottom: var(--cards-padding);
}

.all-pages-link {
    margin: 1.8rem 0 0 0;
}
.all-pages-link a {
    color: #000;
    font-size: 1.375rem;
}
.all-pages-link a:is(:hover, :focus, :active) {
    color: var(--color-blue);
}
.all-pages-link a:is(:focus, :active) {
    outline: var(--focus-outline);
}

@media only screen and (min-width: 1025px) {
    section.grid-category {
        overflow: unset;
    }
    .grid-category-content {
        position: sticky;
        top: var(--header-height);
    }
}

@media only screen and (max-width: 1024px) {
    :root {
        --grid-category-columns: 3;
    }
    .grid-category-outer {
        /* padding: 0 30px; /* NOT SURE WHY THIS WAS HERE—DOESN'T SEEM NEEDED. TODO: DELETE IN A LATER VERSION */
    }
    .grid-category-content {
        flex: 0 0 100%;
    }
    .grid-category-page-cards {
        flex: 0 0 100%;
    }
}

@media only screen and (max-width: 768px) {
    :root {
        --grid-category-columns: 2;
    }
}

@media only screen and (max-width: 550px) {
    :root {
        --grid-category-columns: 1;
    }
}