/* =========================================
   22 – BILDGALERIE
========================================= */

.wf-element-22 {
    width: 100%;
}


/* =========================================
   INTRO
========================================= */

.wf-gallery-intro {
    max-width: 900px;
    margin: 0 auto 3rem;
}

.wf-gallery-title {
    margin: 0 0 1rem;
}

.wf-gallery-text {
    line-height: 1.6;
}


/* =========================================
   MASONRY GALERIE
========================================= */

.wf-gallery {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.wf-gallery-column {
    flex: 1 1 0;
    min-width: 0;
}

.wf-gallery-item {
    position: relative;
    width: 100%;
    margin: 0 0 1rem;
    overflow: hidden;
}

.wf-gallery-link {
    position: relative;
    display: block;
    overflow: hidden;
}

.wf-gallery-image {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .3s ease;
}


/* =========================================
   BILDTITEL
========================================= */

.wf-gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    margin: 0;
    padding: 2.5rem 1.25rem 1rem;

    color: #fff;
    font-size: 1rem;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, .65) 0%,
            rgba(0, 0, 0, 0) 100%
        );
}


/* =========================================
   HOVER
========================================= */

@media (hover: hover) and (pointer: fine) {

    .wf-gallery-link:hover .wf-gallery-image {
        transform: scale(1.02);
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 992px) {

    .wf-gallery {
        column-count: 2;
    }

}


/* =========================================
   SMARTPHONE
========================================= */

@media (max-width: 600px) {

    .wf-gallery {
        column-count: 1;
    }

}