#gallery {
    margin: auto;
    padding: 0 16px 64px;
    max-width: calc(1440px - 32px);
}

#gallery .single-gallery {
    width: 100%;
}

#gallery .single-gallery:first-child {
    margin-top: 0;
}

#gallery .single-gallery section-header {
    width: 100%;
    max-width: 796px;
}

#gallery .single-gallery section-header [slot=title], #gallery .single-gallery section-header [slot=description] {
    text-align: center;
}

#gallery .single-gallery section-header [slot=title] {
    margin: auto;
}

#gallery .single-gallery .gallery-item-wrapper {
    gap: 16px;
    display: grid;
    margin-top: 24px;
    grid-template-columns: repeat(1, 1fr);
}

#gallery .single-gallery .gallery-item-wrapper .gallery-item {
    width: 100%;
    height: 264px;
    overflow: hidden;
    border-radius: 6px;
}

#gallery .single-gallery .gallery-item-wrapper .gallery-item.image {
    cursor: zoom-in;
}

#gallery .single-gallery .gallery-item-wrapper .gallery-item.image img {
    width: 100%;
    height: 100%;
    cursor: zoom-in;
    object-fit: cover;
    transition: all 350ms ease;
}

#gallery .single-gallery .gallery-item-wrapper .gallery-item.image:hover img {
    transform: scale(1.1);
}

#gallery .single-gallery .gallery-item-wrapper .gallery-item.video {
    cursor: pointer;
}

#gallery .single-gallery .gallery-item-wrapper .gallery-item.video iframe {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

@media screen and (min-width: 580px) {
    #gallery .single-gallery .gallery-item-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1020px) {
    #gallery .single-gallery section-header {
        margin-right: auto;
        margin-left: unset;
    }

    #gallery .single-gallery section-header [slot=title], #gallery .single-gallery section-header [slot=description] {
        text-align: left;
    }

    #gallery .single-gallery section-header [slot=title] {
        margin-left: unset;
        margin-right: auto;
        margin-bottom: -12px;
    }

    #gallery .single-gallery:nth-child(2n) section-header {
        margin-right: unset;
        margin-left: auto;
    }

    #gallery .single-gallery:nth-child(2n) section-header [slot=title], #gallery .single-gallery:nth-child(2n) section-header [slot=description] {
        text-align: right;
    }

    #gallery .single-gallery:nth-child(2n) section-header [slot=title] {
        margin-left: auto;
        margin-right: unset;
        margin-bottom: -12px;
    }

    #gallery .single-gallery .gallery-item-wrapper {
        margin-top: 32px;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1280px) {
    #gallery .single-gallery .gallery-item-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}