/* ==========================================================================
   PB Design System
   CORE · Media
   ========================================================================== */

/* --------------------------------------------------------------
   Media base
-------------------------------------------------------------- */

.pb-root .media {
    display: block;
    overflow: hidden;
    background: var(--color-blanco);
    border: var(--border-gold);
    border-radius: var(--radio-xl);
}

.pb-root .media img,
.pb-root .media video,
.pb-root .media iframe {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------
   Sin borde
-------------------------------------------------------------- */

.pb-root .media--sin-borde {
    border: 0;
    border-radius: 0;
}

.pb-root .media--borde-abajo {
    border: 0;
    border-radius: 0;
    border-bottom: var(--border-gold);
    box-shadow: 0 6px 20px var(--color-dorado);
}

/* --------------------------------------------------------------
   Ratios
-------------------------------------------------------------- */

.pb-root .ratio-1-1 img,
.pb-root .ratio-1-1 video,
.pb-root .ratio-1-1 iframe {
    aspect-ratio: 1 / 1;
}

.pb-root .ratio-3-4 img,
.pb-root .ratio-3-4 video,
.pb-root .ratio-3-4 iframe {
    aspect-ratio: 3 / 4;
}

.pb-root .ratio-4-3 img,
.pb-root .ratio-4-3 video,
.pb-root .ratio-4-3 iframe {
    aspect-ratio: 4 / 3;
}

.pb-root .ratio-9-16 img,
.pb-root .ratio-9-16 video,
.pb-root .ratio-9-16 iframe {
    aspect-ratio: 9 / 16;
}

.pb-root .ratio-16-10 img,
.pb-root .ratio-16-10 video,
.pb-root .ratio-16-10 iframe {
    aspect-ratio: 16 / 10;
}

.pb-root .ratio-21-9 img,
.pb-root .ratio-21-9 video,
.pb-root .ratio-21-9 iframe {
    aspect-ratio: 21 / 9;
}

/* --------------------------------------------------------------
   Ajustes de objeto
-------------------------------------------------------------- */

.pb-root .object-cover img,
.pb-root .object-cover video {
    object-fit: cover;
}

.pb-root .object-contain img,
.pb-root .object-contain video {
    object-fit: contain;
}

/* --------------------------------------------------------------
   Media responsive
-------------------------------------------------------------- */

@media (max-width: 640px) {
    .pb-root .media-mobile-4-5 img,
    .pb-root .media-mobile-4-5 video {
        aspect-ratio: 4 / 5;
    }

    .pb-root .media-mobile-1-1 img,
    .pb-root .media-mobile-1-1 video {
        aspect-ratio: 1 / 1;
    }
}