section.gallery {
    padding-block: 6vmin;
    text-align: center;
    background-color: var(--secondary1);
}

section.gallery h2 {
    font-family: gelica, serif;
    font-size: max(8vmin, 2rem);
    color: var(--text1);
    margin-bottom: 0.3em;
}

section.gallery p.teaser {
    margin: 0 auto 1.5em;
    max-width: min(54ch, 90%);
    font-size: max(2.5vmin, 1rem);
    line-height: 1.35;
    color: var(--text1);
}

section.gallery .gallery-tabs {
    padding: 0 5vw;
    font-size: max(2vmin, 0.8rem);
    margin: 0 auto 2em auto;
    max-width: 110ch;
}

section.gallery .gallery-tabs-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4em;
}

section.gallery .gallery-tabs-select {
    display: none;
    width: min(100%, 40ch);
    margin: 0 auto;
    padding: 0.5em 1em;
    border: 0.2em solid var(--text1);
    background-color: var(--secondary1);
    color: var(--text1);
    font-family: gelica, sans-serif;
    font-size: inherit;
    border-radius: 100vmax;
    cursor: pointer;
}

@media (max-width: 52rem) {
    section.gallery .gallery-tabs-buttons {
        display: none;
    }

    section.gallery .gallery-tabs-select {
        display: block;
    }
}

section.gallery .tab-button {
    padding: 0.5em 1em;
    border: 0.2em solid var(--text1);
    background-color: transparent;
    color: var(--text1);
    font-family: gelica, sans-serif;
    border-radius: 100vmax;
    cursor: pointer;
    transition: all 0.3s ease;
}

section.gallery .tab-button:hover {
    background-color: color-mix(in srgb, var(--text1) 50%, transparent);
    color: var(--secondary1);
}

section.gallery input[type="radio"] {
    display: none;
}

section.gallery input[type="radio"]:checked + .tab-button {
    background-color: var(--text1);
    color: var(--secondary1);
}

section.gallery .gallery-content {
    width: 100%;
}

section.gallery .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(max(40vmin, 150px), 1fr));
    gap: 3vmin;
    width: min(100%, 140ch);
    margin: 0 auto;
    padding: 0 2vmin;
    display: none;
}

section.gallery .gallery-grid.active {
    display: grid;
}

section.gallery .gallery-grid:has(.gallery-item:only-child) {
    grid-template-columns: minmax(0, 60ch);
    justify-content: center;
    width: min(100%, 60ch);
}

section.gallery .gallery-item {
    overflow: hidden;
    border-radius: max(2vmin, 20px);
    max-height: 80svh;
    aspect-ratio: 4 / 3;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

section.gallery .gallery-item:hover {
    transform: scale(1.03);
    box-shadow: 0 0.8vmin 2.4vmin color-mix(in srgb, var(--text2) 20%, transparent);
}

section.gallery .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

dialog {
    border: 0;
    border-radius: max(3vmin, 20px);
    max-width: 100vw;
    max-height: 100vh;
    margin: auto;
    background-color: var(--secondary2);
}

dialog::backdrop {
    background-color: color-mix(in srgb, var(--text1) 80%, transparent);
}

dialog button {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    color: var(--secondary2);
    font-size: max(5vmin, 2rem);
    cursor: pointer;
    width: max(7vmin, 2.5rem);
    height: max(7vmin, 2.5rem);
    align-items: center;
    justify-content: center;
    transform: scale(0.9);
}

dialog button:hover {
    transform: scale(1);
}

dialog img {
    max-height: 80vh;
    width: 100%;
    object-fit: contain;
    display: block;
}

dialog p {
    color: var(--text2);
    font-family: gelica, serif;
    font-size: max(3vmin, 1rem);
    font-weight: 600;
    text-align: center;
    padding: 0.5em 0;
}