/* ------------------------------ */
/* ---------- Arbeiten ---------- */
/* ------------------------------ */

.section__work {
    overflow: hidden;
}

.work img, .work video {
    width: 100%;
}

.work .video_container video {
    position: relative;
    z-index: 2;
}

.work__media--video {
    position: relative;
    aspect-ratio: 885 / 1100;
}

.work__media--video .video_loader__container {
    width: 30%;
}


/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 1600px) {

    .work--big:not(.work--filtered) {
        width: calc(50% - calc(var(--spacing-2) * 2));
    }

    .work--small:not(.work--filtered) {
        width: calc(25% - calc(var(--spacing-2) * 2));
    }

    .work.work--filtered {
        width: calc(33.3333333% - calc(var(--spacing-2) * 2));
    }

    .work h2, .work h3 {
        margin-bottom: var(--spacing-3);
    }

}


@media all and (min-width: 1400px) {

    .work--big .work__info {
        min-height: 55px;
    }

    .work--small .work__info, .work.work--filtered .work__info {
        min-height: 80px;
    }

    .work .button {
        margin-top: var(--spacing-3);
    }

}


@media all and (min-width: 768px) {

    .work_container {
        margin: calc((var(--spacing-6) / 2) * -1) calc(var(--spacing-2) * -1);
    }

    .work {
        margin: calc(var(--spacing-6) / 2) var(--spacing-2);
    }

    .work__info {
        margin-top: var(--spacing-3-5);
    }

}


@media all and (max-width: 1899.98px) and (min-width: 1600px) {

    .section > .section__work  {
        padding-right: var(--spacing-5) !important;
        padding-left: var(--spacing-5) !important;
    }

    .work.work--filtered h2, .work.work--filtered h3 {
        font-size: 25px;
    }

}


@media all and (max-width: 1599.98px) and (min-width: 1400px) {

    .work h2, .work h3 {
        font-size: 25px;
    }

}


@media all and (max-width: 1599.98px) and (min-width: 1240px) {

    .work .button {
        margin-bottom: -18px;
    }

}


@media all and (max-width: 1599.98px) and (min-width: 768px) {

    .work--small:not(.work--filtered) {
        width: calc(50% - calc(var(--spacing-2) * 2));
    }

    .work--big:not(.work--filtered) {
        width: calc(100% - calc((var(--spacing-9) + var(--spacing-2)) * 2));
        margin: calc(var(--spacing-6) / 2) calc(var(--spacing-9) + var(--spacing-2));
    }

    .work.work--filtered {
        width: calc(50% - calc(var(--spacing-2) * 2));
    }

    .work .button {
        margin-top: var(--spacing-2);
        margin-bottom: -18px;
    }

    .work h2, .work h3 {
        margin-bottom: var(--spacing-2);
    }

}


@media all and (max-width: 767.98px) {

    .work_container {
        margin: calc((var(--spacing-5-5) / 2) * -1) calc(var(--spacing-2) * -1);
    }

    .work {
        margin: calc(var(--spacing-5-5) / 2) var(--spacing-2);
    }

    .work--big, .work.work--filtered {
        width: calc(100% - calc(var(--spacing-2) * 2));
    }

    .work h2, .work h3 {
        margin-bottom: var(--spacing-2);
    }

    .work__info {
        margin-top: var(--spacing-3);
    }

    .work .button {
        margin-top: var(--spacing-1);
    }

}


@media all and (max-width: 767.98px) and (min-width: 576px) {

    .work--small:not(.work--filtered) {
        margin: calc(var(--spacing-5-5) / 2) calc(var(--spacing-4) * 2.5);
        width: calc(100% - (var(--spacing-4) * 2.5) * 2);
    }

}


@media all and (max-width: 575.98px) {

    .work--small:not(.work--filtered) {
        width: calc(100% - calc(var(--spacing-2) * 2));
    }

}