.fancybox__main-panel {
    flex: 0 0 auto;
    min-height: 0;
    margin: auto;
    position: relative;
    display: grid;
    grid-template-columns: 50% 50%;
}

/* Example of aspect ratio hack before `aspect-ratio` has good browser support, see https://caniuse.com/mdn-css_properties_aspect-ratio  */
@media (min-aspect-ratio: 16/9) {
    .fancybox__main-panel {
        width: calc((100vh - 64px * 2) * 16 / 9);
        height: calc(100vh - 64px * 2);
    }
}

@media (max-aspect-ratio: 16/9) {
    .fancybox__main-panel {
        height: calc((100vw - 64px * 2) * 9 / 16);
        width: calc(100vw - 64px * 2);
    }
}

.fancybox__left-panel {
    color: var(--palette-text-primary);
    background: var(--palette-common-white);
    overflow: auto;
    padding: 2em;
}

.fancybox__spinner {
    color: var(--palette-text-primary);
}

.fancybox__carousel {
    overflow: hidden;
    margin: 0;
    background: var(--palette-text-light);
}

.fancybox__slide {
    padding: 0;
}

.carousel__button.is-close {
    top: 8px;
    right: 8px;
}

.fancybox__carousel .carousel__dots {
    top: calc(100% - 22px);
    color: var(--palette-common-white);
    z-index: 20;
}

.fancybox__toolbar {
    background: none;
}

@media (max-width: 1024px) {
    .fancybox__main-panel > .fancybox__left-panel {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
    .fancybox__main-panel > .fancybox__carousel {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }
}
@media (min-width: 1025px) {
    .fancybox__main-panel > .fancybox__left-panel {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }
    .fancybox__main-panel > .fancybox__carousel {
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }
}

@media (max-width: 1024px) {
    .fancybox__main-panel {
        grid-template-columns: 100%;
        max-height: calc(100vw - 20px);
        height: auto;
    }
}

.fancybox__left-panel > .wp-block-heading {
    margin-top: 0 !important;
}
.fancybox__left-panel > .wp-block-group > p {
    max-height: none !important;
}
.fancybox__left-panel > .wp-block-group > .wp-block-buttons {
    display: none !important;
}