.archive #hero {
    padding-bottom: 0;
    .content {
        padding-bottom: 50px;
    }
    .graphic {
        aspect-ratio: 2/1;
        overflow: hidden;
        svg {
            object-fit: cover;
            object-position: center top;
            max-width: 100%;
        }
    }
}
#gallery {
    --column-gap: 3rem;
    --row-items: 3;
    position: relative;
    padding: 6rem 0;
    background-color: var(--bs-light);
    .items {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--column-gap);
        .item {
            position: relative;
            flex: 1 0 calc(100% / var(--row-items));
            max-width: calc((100% / var(--row-items)) - (var(--column-gap) / var(--row-items)) * (var(--row-items) - 1));
            > a {
                display: flex;
                flex-direction: column;
                align-items: center;
                background-color: var(--bs-white);
                border-radius: var(--bs-border-radius-xl);
                height: 100%;
                text-decoration: none;
                color: inherit;
            }
            .meta {
                display: flex;
                gap: 1rem;
                .types + .location {
                    position: relative;
                    padding-left: 1rem;
                    &::before {
                        content: "";
                        display: block;
                        position: absolute;
                        left: 0;
                        top: 0;
                        bottom: 0;
                        width: 2px;
                        background-color: var(--bs-light);
                    }
                }
            }
            .media {
                width: 100%;
                img {
                    width: 100%;
                }
            }
            .content {
                padding: 1.5rem 2rem;
                text-align: center;
            }
        }
    }
    &.single {
        .media {
            width: 100%;
            border-radius: var(--bs-border-radius-xl);
            overflow: hidden;
            img {
                width: 100%;
            }
        }
        .needed {
            padding-top: 5rem;
            .items {
                margin-top: 3rem;
                .item {
                    background-color: var(--bs-white);
                    border-radius: var(--bs-border-radius-xl);
                    padding: 1.5rem;
                }
            }
        }
        .outcome {
            padding-top: 5rem;
        }
    }
}

#intro {
    position: relative;
    padding: 6rem 0 12rem;
    margin-bottom: -6rem;
    /* background-color: var(--bs-light); */
    .title {
        margin-bottom: 3rem;
    }
    .buttons {
        justify-content: center;
        margin-top: 3rem;
        .btn:nth-child(2n) {
            --bs-btn-color: var(--bs-white);
            --bs-btn-bg: var(--bs-secondary);
            --bs-btn-border-color: var(--bs-secondary);
            --bs-btn-hover-color: var(--bs-white);
            --bs-btn-hover-bg: var(--bs-secondary);
            --bs-btn-hover-border-color: var(--bs-secondary);
            --bs-btn-focus-shadow-rgb: 49,132,253;
            --bs-btn-active-color: var(--bs-white);
            --bs-btn-active-bg: var(--bs-secondary);
            --bs-btn-active-border-color: var(--bs-secondary);
            --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
            --bs-btn-disabled-color: var(--bs-white);
            --bs-btn-disabled-bg: var(--bs-secondary);
            --bs-btn-disabled-border-color: var(--bs-secondary);
        }
    }
}