/* Extracted from dark/Show.php */
.crop-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.glightbox-container iframe {
    border: none !important
}

html.js .grid-item-img-v img {
    display: block !important
}

html.js .grid-item-img-v canvas {
    display: none !important
}

.grid-item-subtitle {
    display: inline-block;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(3px);
    padding: .25rem .9rem;
    border-radius: 4px;
    opacity: 0;
    transition: opacity .35s ease
}

.grid-item-img-v:hover .grid-item-subtitle,
.grid-item-img-h:hover .grid-item-subtitle {
    opacity: 1
}

.grid-item-subtitle span {
    display: block;
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 255, 255, .9)
}

.grid-item,
.grid-item-img-v,
.grid-item-img-h {
    overflow: visible !important
}

.grid-item-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    white-space: nowrap
}

.text-right {
    left: 100%;
    margin-left: 1.4rem;
    text-align: left
}

.text-left {
    right: 100%;
    margin-right: 1.4rem;
    text-align: right
}

@media (max-width:576px) {
    .grid-item-content {
        left: 50% !important;
        right: auto !important;
        top: auto;
        bottom: -2.4rem;
        transform: translateX(-50%) translateY(0);
        margin: 0;
        text-align: center
    }
}

@media (min-width:768px) {
    .col-stagger-1 {
        margin-top: 0
    }

    .col-stagger-2 {
        margin-top: 4rem
    }
}

.gslide iframe {
    width: 90vw !important;
    height: 90vh !important
}

@media (hover:none) and (pointer:coarse) {
    .grid-item-subtitle {
        opacity: 1 !important
    }

    .grid-item-subtitle,
    .grid-item-content {
        pointer-events: none
    }
}

.loader-bg {
    display: flex
}