/* Effektgruppe: images/responsive; Reihenfolge in inc/assets.php. */

  /* verändert ein square image, zu 2:1 in Mobil-Mode */
/* Verändert quadratische und landscape-Bilder zu 2:1 im Mobilmodus */
@media screen and (max-width: 1024px) {
    .wp-block-kadence-image.mobile-wide .kb-image-ratio-square,
    .wp-block-kadence-image.mobile-wide .kb-is-ratio-image,
    .wp-block-kadence-image.mobile-wide .kb-image-ratio-land43,
    .wp-block-kadence-image.mobile-wide .kb-image-ratio-land32 {
      padding-bottom: 50%; /* 2:1 Verhältnis */
    }
  }

@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* * Die Klasse .tablet-high greift nur in diesem Breitenbereich.
     * Das Verhältnis 1:2 (200% padding-bottom) wird angewendet.
     */
    .wp-block-kadence-image.tablet-high .kb-image-ratio-square,
    .wp-block-kadence-image.tablet-high .kb-is-ratio-image,
    .wp-block-kadence-image.tablet-high .kb-image-ratio-land43,
    .wp-block-kadence-image.tablet-high .kb-image-ratio-land32,
    .wp-block-kadence-image.tablet-high .kb-image-ratio-port43,
    .wp-block-kadence-image.tablet-high .kb-image-ratio-port32 {
        /* Setzt das hohe Verhältnis auf 1:2 (200%) */
        padding-bottom: 200%; 
    }
}

  @media screen and (max-width: 1024px) {
    /* * Erzwingt das vertikale (hohe) Seitenverhältnis nur für Bilder mit der Klasse .mobile-high
     * Wir zielen auf alle Ratio-Klassen ab, um die Einstellung zu überschreiben.
     */
    .wp-block-kadence-image.mobile-high .kb-image-ratio-square,
    .wp-block-kadence-image.mobile-high .kb-is-ratio-image,
    .wp-block-kadence-image.mobile-high .kb-image-ratio-land43,
    .wp-block-kadence-image.mobile-high .kb-image-ratio-land32,
    .wp-block-kadence-image.mobile-high .kb-image-ratio-port43,
    .wp-block-kadence-image.mobile-high .kb-image-ratio-port32 {
        /* * Setzt das Verhältnis auf 1:2 (Breite:Höhe)
         * Berechnung: (Höhe / Breite) * 100 = (2 / 1) * 100 = 200%
         */
        padding-bottom: 200%; 
    }
}