.tb-image {
    position: relative;
    width: 100%;
    max-width: var(--tb-breakpoint-medium);
    aspect-ratio: 16/9;
    background-position: center;
    background-size: cover;
}

.tb-image.tb-full-width {
    max-width: 100%;
}

.tb-image .tb-open {
    position: absolute;
    top: var(--tb-spacing-20);
    right: var(--tb-spacing-20);
    background-color: transparent;
    opacity: 1;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
}

.tb-image .tb-close {
    position: absolute;
    top: var(--tb-spacing-20);
    right: var(--tb-spacing-60);
    background-color: var(--tb-color-blue-700);
}

.tb-image-lightbox {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    padding: calc(var(--tb-btn-size-medium) + var(--tb-spacing-20) * 2) var(--tb-spacing-60) var(--tb-spacing-100)
        var(--tb-spacing-60);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tb-transition-duration-medium);
}

.tb-image-lightbox.tb-visible {
    opacity: 1;
    pointer-events: all;
}

.tb-image-lightbox-content {
    width: 100%;
    max-width: var(--tb-breakpoint-large);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tb-spacing-10);
    color: var(--tb-color-white);
}

.tb-image-lightbox img {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .tb-image-lightbox {
        padding: calc(var(--tb-btn-size-medium) + var(--tb-spacing-20) * 2) var(--tb-spacing-50) var(--tb-spacing-100)
            var(--tb-spacing-50);
    }

    .tb-image .tb-close {
        right: var(--tb-spacing-50);
    }
}

@media (max-width: 768px) {
    .tb-image {
        order: 0;
        margin: var(--tb-spacing-50);
    }

    .tb-image .tb-open {
        display: none;
    }
}

@media (max-width: 500px) {
    .tb-image {
        margin: var(--tb-spacing-20);
    }

    .tb-image-lightbox {
        padding: calc(var(--tb-btn-size-medium) + var(--tb-spacing-20) * 2) var(--tb-spacing-20) var(--tb-spacing-50)
            var(--tb-spacing-20);
    }

    .tb-image .tb-close {
        right: var(--tb-spacing-20);
    }
}


.tb-video::before {
    content: "";
    float: left;
}
.tb-video::after {
    display: table;
    content: "";
    clear: both;
}
.tb-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}