<section class="two-column-image-divider-asymmetric">
    <figure>
        <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--hoch" src="http://via.placeholder.com/600x800" alt="Bild mit Umrandung" />
    </figure>
    <figure>
        <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__right-image--hoch" src="http://via.placeholder.com/600x800" alt="Bild mit Umrandung" />
    </figure>
</section>

<section class="two-column-image-divider-asymmetric">
    <figure>
        <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--quer" src="http://via.placeholder.com/800x600" alt="Bild mit Umrandung" />
    </figure>
    <figure>
        <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__right-image--quer" src="http://via.placeholder.com/800x600" alt="Bild mit Umrandung" />
    </figure>
</section>
<section class="two-column-image-divider-asymmetric">
    <figure>
        <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--hoch" src="http://via.placeholder.com/600x800" alt="Bild mit Umrandung" />
    </figure>
    <figure>
        <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__right-image--hoch" src="http://via.placeholder.com/600x800" alt="Bild mit Umrandung" />
    </figure>
</section>

<section class="two-column-image-divider-asymmetric">
    <figure>
        <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--quer" src="http://via.placeholder.com/800x600" alt="Bild mit Umrandung" />
    </figure>
    <figure>
        <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__right-image--quer" src="http://via.placeholder.com/800x600" alt="Bild mit Umrandung" />
    </figure>
</section>
/* No context defined. */
  • Content:
    $two-column-image-divider-height-md: 3.5 * $spacer-xxl;
    $two-column-image-divider-height-lg: 6 * $spacer-xxl;
    
    .two-column-image-divider-asymmetric {
      display: flex;
      flex-direction: column;
      margin: 0 auto;
    }
    
    .two-column-image-divider-asymmetric__left-image,
    .two-column-image-divider-asymmetric__right-image {
      max-height: 100%;
      object-fit: cover;
    }
    
    @media screen and (min-width: $grid-breakpoint-xl) {
      .two-column-image-divider-asymmetric {
        flex-direction: row;
        gap: $spacer-xxl;
        align-items: center;
        justify-content: space-between;
    
        width: 100%;
      }
    
      .two-column-image-divider-asymmetric__left-image--hoch {
        height: calc($two-column-image-divider-height-lg / 1.3);
      }
    
      .two-column-image-divider-asymmetric__right-image--hoch {
        height: $two-column-image-divider-height-lg;
      }
    
      .two-column-image-divider-asymmetric__left-image--quer {
        height: calc($two-column-image-divider-height-md / 1.2);
      }
    
      .two-column-image-divider-asymmetric__right-image--quer {
        height: $two-column-image-divider-height-md;
      }
    }
    
  • URL: /components/raw/two-column-image-divider-asymmetric/_two-column-image-divider-asymmetric.scss
  • Filesystem Path: components/04-molecules/visual-divider/two-column-image-divider-asymmetric/_two-column-image-divider-asymmetric.scss
  • Size: 1.1 KB
  • Handle: @two-column-image-divider-asymmetric
  • Preview:
  • Filesystem Path: components/04-molecules/visual-divider/two-column-image-divider-asymmetric/two-column-image-divider-asymmetric.html

No notes defined.