#dance-gallery-container {
    padding: var(--padding-desktop);

    display: flex;
    flex-direction: column;
    gap: 48px;
}


.gallery {
    column-count: 3;
    column-gap: 1rem;
}

.gallery-image-container {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
    break-inside: avoid;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
}

.gallery-img {
    width: 100%;
    border-radius: 8px;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-image-container:hover .gallery-img,
.gallery-image-container:focus-within .gallery-img {
    transform: scale(1.02);
}

.gallery-image-container:hover .gallery-image-overlay,
.gallery-image-container:focus-within .gallery-image-overlay {
    opacity: 1;
}

.gallery-image-overlay-text {
    font-family: var(--paragraph-font-family);
    font-size: var(--paragraph-font-size);
    color: var(--offwhite);
    font-weight: bold;
}

/* Responsivitet */

@media (max-width: 600px) {
    #dance-gallery-container {
        padding: var(--padding-mobile);
        gap: 44px;
    }

    .gallery {
        column-count: 1;
    }

    .gallery-image-overlay {
        padding: 20px;
    }
}

@media (max-width: 900px) {
    #dance-gallery-container {
        padding: var(--padding-mobile);
        gap: 44px;
    }

    .gallery {
        column-count: 1;
    }

    .gallery-image-overlay {
        padding: 20px;
    }
}