/**
 /* Estilos para el editor de bloques Gutenberg
 * Relaciones de aspecto para imágenes
 */

/* Clase base para todos los estilos de imagen */
.wp-block-image.is-style-aspect-ratio-16-9,
.wp-block-image.is-style-aspect-ratio-4-3,
.wp-block-image.is-style-aspect-ratio-1-1,
.wp-block-image.is-style-aspect-ratio-3-4,
.wp-block-image.is-style-aspect-ratio-9-16,
.wp-block-image.is-style-aspect-ratio-1392-456 {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.wp-block-image.is-style-aspect-ratio-16-9 img,
.wp-block-image.is-style-aspect-ratio-4-3 img,
.wp-block-image.is-style-aspect-ratio-1-1 img,
.wp-block-image.is-style-aspect-ratio-3-4 img,
.wp-block-image.is-style-aspect-ratio-9-16 img,
.wp-block-image.is-style-aspect-ratio-1392-456 img {
    width: 100%;
    height: auto;
    display: block;
}

/* Clases para establecer dimensiones máximas recomendadas */
.wp-block-image.is-style-aspect-ratio-16-9 {
    max-width: 800px; /* Ancho máximo recomendado */
    max-height: 450px; /* Altura basada en relación 16:9 */
}

.wp-block-image.is-style-aspect-ratio-4-3 {
    max-width: 800px;
    max-height: 600px; /* Relación 4:3 */
}

.wp-block-image.is-style-aspect-ratio-1-1 {
    max-width: 600px;
    max-height: 600px; /* Cuadrado */
}

.wp-block-image.is-style-aspect-ratio-3-4 {
    max-width: 600px;
    max-height: 800px; /* Retrato */
}

.wp-block-image.is-style-aspect-ratio-9-16 {
    max-width: 450px;
    max-height: 800px; /* Vertical */
}

.wp-block-image.is-style-aspect-ratio-1392-456 {
    max-width: 1392px;
    max-height: 456px; /* Relación personalizada */
}