/* Gallery */
.gallery {
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
}

.gallery__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding-inline: calc(var(--gap) * 2);
    margin-inline: auto;
    max-width: var(--container-max);
    width: 100%;
}

.gallery__title {
    font-size: var(--text-sm);
}

.gallery__list {
    display: grid;
    gap: calc(var(--gap) * 4) calc(var(--gap) * 2);
    padding-inline: calc(var(--gap) * 2);
    margin-inline: auto;
    max-width: var(--container-max);
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    overflow: hidden;

    @media (min-width: 700px) {
        grid-template-columns: repeat(3, 1fr);
    }

    @media (min-width: 1000px) {
        grid-template-columns: repeat(4, 1fr);
    }
}

.gallery__item {
    opacity: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
}

.gallery__item.is-visible {
    opacity: 1;
}

.page--nojs .gallery__item {
    opacity: 1;
    display: block !important;
}

.gallery__link {
    position: relative;
    display: block;

    width: 100%;
    border-radius: var(--radius-md);
    overflow: clip;
    transition: all var(--duration-1);
    background: linear-gradient(135deg,
            rgba(0, 82, 147, 0.1) 0%,
            rgba(0, 156, 222, 0.1) 100%);
}

.gallery__link:focus-visible {
    outline: none;
    border: 2px solid var(--color-blue);
    border-radius: var(--radius-md);
}

/* Hide items beyond first row when collapsed */
.gallery:not(.gallery--expanded) .gallery__item:nth-child(n + 3) {
    display: none;
}

@media (min-width: 700px) {
    .gallery:not(.gallery--expanded) .gallery__item:nth-child(n + 3) {
        display: flex;
    }

    .gallery:not(.gallery--expanded) .gallery__item:nth-child(n + 4) {
        display: none;
    }
}

@media (min-width: 1000px) {
    .gallery:not(.gallery--expanded) .gallery__item:nth-child(n + 4) {
        display: flex;
    }

    .gallery:not(.gallery--expanded) .gallery__item:nth-child(n + 5) {
        display: none;
    }
}

.gallery__image {
    display: block;
    object-fit: cover;
    will-change: opacity;
    aspect-ratio: 324 / 212;
    height: auto;
    width: 100%;
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}

.gallery__link.is-loaded .gallery__image {
    opacity: 1;
}

.page--nojs .gallery__image {
    opacity: 1;
}

.gallery-toggle {
    background: transparent;
    border: none;
    color: inherit;
    text-decoration: underline;
    padding: 0;
    font-size: inherit;
    cursor: pointer;
    transition: opacity var(--duration-1) var(--ease-standard);
    border-radius: 50px;
}

.gallery-toggle:hover {
    opacity: 0.5;
}