@import url('./sections/hero.css');
@import url('./shared/taxonomy-filters.css');

.section-heading {
    padding-block: 3.5rem;

    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .section-titles {
        gap: 1.5rem;
    }
}

.section-grid {
    padding-block-end: 8rem;

    .container {
        display: flex;
        flex-direction: column;
    }

    &:not(.with-filters) .container {
        gap: 3rem;
    }

    .section-title {
        text-align: center;
        font-size: var(--text-18px);
        font-weight: 500;
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4.25rem;
    }

    .row {
        scroll-margin-top: calc(var(--header-height) + 1rem);

        .heading {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
        }

        .title {
            font-size: var(--text-30px);
        }

        .link-wrap {
            padding-block-start: 2rem;

            .link {
                max-width: 240px;
                width: 100%;
            }
        }
    }
}

.bottom-image {
    height: 420px;
}

@media (max-width: 1023px) {
    .section-grid {
        padding-block-end: 3.5rem;

        .grid {
            grid-template-columns: 1fr;
        }
    }

    .section-grid .row {
        max-width: 430px;
        margin: auto;

        .link-wrap .link {
            max-width: 100%;
        }
    }
}