main h1 {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-transform: none;
}
main .table-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    user-select: none;
    pointer-events: none;
}
main h1 img {
    width: 2.25rem;
    height: auto;
}
.main__section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.main__section .filter-nav {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.main__section .filter-nav a {
    padding: .5rem 1rem;
    border-radius: 100vw;
    background: var(--transparent-surface);
    transition: font-size .175s ease-in-out;
}
.main__section .filter-nav a.active {
    background: var(--primary-purple);
}
main .table-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    background-image: url('/images/pages/community-guides/progress/street-building-upgrades.webp');
    background-size: cover;
    background-position: bottom center;
    aspect-ratio: 3/4;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border: 2px solid var(--accent-purple);
    outline: 1px dashed var(--accent-purple);
    outline-offset: -4px;
}
main .table * {
    font-size: 1.5rem;
    text-align: center;
    transition: font-size .175s ease-in-out;
}
main .table {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgba(0,0,0,.8), var(--transparent-primary-purple));
}
main .table-header,
main .table-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    background: rgba(0,0,0,.275);
    height: 100%;
    border-bottom: 1px solid var(--transparent-accent-purple);
}
main .table-header {
    background: rgba(0,0,0,.5);
    position: relative;
}
main .table-header::before {
    background-image: 
    linear-gradient(to right, var(--transparent-primary-purple) 1px, transparent 1px),
    linear-gradient(to top, var(--transparent-primary-purple) 1px, transparent 1px);
    background-size: 5px 5px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 50%, black calc(100% - 50%), transparent 100%), linear-gradient(to top, transparent 0, black 50%, black calc(100% - 50%), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 50%, black calc(100% - 50%), transparent 100%), linear-gradient(to top, transparent 0, black 50%, black calc(100% - 50%), transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    mask-composite: intersect;
}
main .table-row:last-child {
    border-bottom: none;
}
main .table span {
    padding: 0 .5rem;
    align-content: center;
    position: relative;
    height: 100%;
    text-shadow: 1px 1px 2px #000;
    font-weight: 400;
}
main .table span:nth-child(2) {
    border-left: 1px solid var(--transparent-accent-purple);
    border-right: 1px solid var(--transparent-accent-purple);
}
main .table-header span {
    font-weight: 600;
}
@media(max-width: 720px) {
    main .table * {
        font-size: 1rem;
    }
}
@media (max-width: 480px) {
    main .table * {
        font-size: .625rem;
    }
    .main__section h1 {
        display: flex;
        gap: 1rem;
        min-width: max-content;
        align-items: center;
        font-size: 1.25rem;
        text-align: center;
    }
    .main__section h1::before,
    .main__section h1::after {
        content: '';
        height: 4px;
        border-radius: 100vw;
        flex-grow: 1;
        background: hsl(36, 70%, 63%);
        opacity: .5;
    }
    .main__section .filter-nav {
        justify-content: center;
    }
    .main__section .filter-nav a {
        font-size: .8rem;
    }

}