/* Popup: smaller size */
.template-part-popup .content .popup-content {
    max-width: 640px !important;
}

@media only screen and (min-width: 960px) {
    .template-part-popup .content .popup-content .col.col-1 {
        min-height: 380px;
    }
}

/* Popup: whole popup is a link (ACF field "lien") */
.template-part-popup .content .popup-content .popup-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.template-part-popup .content .popup-content .col.col-2 .button-holder {
    position: relative;
    z-index: 3;
}

/* Popup: no image -> text column takes the full width */
.template-part-popup.template-part-popup--without-image .content .popup-content .col.col-2 {
    width: 100%;
}

/* Popup: no content -> only the image is displayed */
.template-part-popup.template-part-popup--image-only .content .popup-content {
    width: fit-content !important;
    max-width: 100% !important;
    background-color: transparent;
}

.template-part-popup.template-part-popup--image-only .content .popup-content .col.col-1 {
    width: auto !important;
    min-height: 0 !important;
}

.template-part-popup.template-part-popup--image-only .content .popup-content .col.col-1 .media-holder {
    height: auto;
}

.template-part-popup.template-part-popup--image-only .content .popup-content .col.col-1 .media-holder picture {
    display: block;
}

.template-part-popup.template-part-popup--image-only .content .popup-content .col.col-1 .media-holder img {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 40px) !important;
    max-height: 80vh !important; /* 80% of the screen height */
    object-fit: contain !important;
    display: block;
}

@media only screen and (max-width: 660px) {
    .template-part-popup.template-part-popup--image-only .content .popup-content .col.col-1 .media-holder img {
        max-width: calc(100vw - 40px) !important;
    }
}