<div class="two-column-image-divider">
    <figure class="two-column-image-divider__left-image">
        <img src="../../assets/bg-images/general/visual-trainings-03.webp" />
    </figure>
    <figure class="two-column-image-divider__right-image">
        <img src="../../assets/bg-images/general/visual-trainings-04.webp" />
    </figure>
</div>
<div class="two-column-image-divider">
    <figure class="two-column-image-divider__left-image">
        <img src="{{ path '/assets/bg-images/general/visual-trainings-03.webp'}}" />
    </figure>
    <figure class="two-column-image-divider__right-image">
        <img src="{{ path '/assets/bg-images/general/visual-trainings-04.webp'}}" />
    </figure>
</div>
/* No context defined. */
  • Content:
    $two-column-image-divider-height-sm: 2 * $spacer-xxl;
    $two-column-image-divider-height-md: 4 * $spacer-xxl;
    
    .two-column-image-divider {
      display: flex;
    }
    
    .two-column-image-divider__left-image,
    .two-column-image-divider__right-image {
      overflow: hidden;
      flex-basis: 50%;
      flex-grow: 1;
      margin: 0;
    
      > img {
        max-width: 100%;
        height: $two-column-image-divider-height-sm;
        object-fit: cover;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .two-column-image-divider__left-image > img,
      .two-column-image-divider__right-image > img {
        height: $two-column-image-divider-height-md;
      }
    }
    
  • URL: /components/raw/two-column-image-divider/_two-column-image-divider.scss
  • Filesystem Path: components/04-molecules/visual-divider/two-column-image-divider/_two-column-image-divider.scss
  • Size: 620 Bytes
  • Handle: @two-column-image-divider
  • Preview:
  • Filesystem Path: components/04-molecules/visual-divider/two-column-image-divider/two-column-image-divider.html

No notes defined.