/* Media — i2t3 component styles */

.i2t3-media-section { position: relative; }

.i2t3-media-section .media-wrapper {
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.i2t3-media-section .media-wrapper iframe,
.i2t3-media-section .media-wrapper video {
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
    height: auto;
    width: 100%;
}
.i2t3-media-section .media-wrapper img {
    display: block;
    height: auto;
    width: 100%;
}

/* Dark overlay (i2t3_media_overlay) — the template sets .has-overlay on the
 * section but renders no .media-overlay element, so draw the darkening as a
 * pseudo-element over the (position-relative) ratio box. */
.i2t3-media-section.has-overlay .ratio::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.i2t3-media-section .media-overlay {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.35);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.i2t3-media-section .media-overlay a {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: var(--i2t3-primary, #0d6efd);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    height: 64px;
    width: 64px;
    text-decoration: none;
}