_main.scss

.mosaic{
    position: relative;
    padding: var(--modular-padding) 0;
    background-color: var(--color-neutral-300);
    >div{
      @extend %container;
    }
    >div >a{
      display: flex;
      position: relative;
    }
    > div > a > div {
      flex: 1;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: start;
      padding: var(--gutter);
      background-color: var(--color-neutral-100);
      #description {
        @include body-large;
        padding-bottom: var(--spacing);
      }
      h3 {
        @include h3;
        padding-bottom: var(--spacing);
      }
      p {
        @include body-large;
      }
      [data-role='cta'] {
        margin-top: var(--spacing);
      }
    }
    figure#mosaic-1 {
      @extend %object-fit-cover;
    }
  }

  @include screen-mlxl{
    .mosaic{
      &._slides-3 {
        >div {
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          grid-gap: var(--gutter);
          a:first-child {
            flex-flow: column nowrap;
            grid-row: 1/3;
            [data-role='cta'] {
              @include button-secondary();
            }
            figure {
              aspect-ratio: 4/3;
            }
          }
          a:nth-child(2), a:nth-child(3){
            flex-flow: row nowrap;
            [data-role='cta'] {
              @include link;
            }
            figure {
              aspect-ratio: 3/4;
              flex: 0 0 40%;
            }
          }
        }
      }
      &._slides-2 {
        >div {
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-gap: var(--gutter);
          /*
          a {
            flex-flow: column nowrap;
            [data-role='cta'] {
              @include button-secondary();
            }
            figure {
              aspect-ratio: 4/3;
            }
          }
          */
        }
      }
      &._slides-1 {
        >div {
          a {
            flex-flow: column nowrap;
            [data-role='cta'] {
              @include button-secondary();
              color: gray !important;
            }
            figure {
              aspect-ratio: 16/9;
            }
          }
        }
      }
    }
  }
  @include screen-s{
    .mosaic{
      >div{
        grid-template-columns: 1fr;
      }
      a + a {
        margin-top: var(--gutter);
        margin-left: 30px !important;
      }
      >div >a{
        flex-flow: column nowrap;
        [data-role='cta'] {
          @include link;
        }
        figure {
          aspect-ratio: 16/9;
        }
      }
    }
  }