.c-mosaik {
  display: flex;
  flex-flow: column wrap;
  gap: 4px;
  height: 100%;
  max-height: 400px;
  width: 100%;
  margin: 0 auto map-get($spacers, 3);
  position: relative;
  border-radius: 0 0 24px 24px;
  overflow: hidden;

  @media (min-width: map-get($grid-breakpoints, md)) {
    border-radius: 0 0 48px 48px;
  }

  &__big {
    flex: 1 0 100%;
    height: 100%;

    @media (min-width: map-get($grid-breakpoints, md)) {
      flex: 1 0;
      width: 50%;
    }

    &.is-1 {
      width: 100%;
    }

    .c-mosaik__item {
      flex: 1;
    }
  }

  &__small {
    display: none;

    @media (min-width: map-get($grid-breakpoints, md)) {
      flex: 1 0 calc(50% - #{map-get($spacers, 1)});
      display: flex;
      flex-flow: row wrap;
      gap: 4px;
      max-height: 400px;
      width: 50%;
    }

    &.is-2 {
      .c-mosaik__item {
        height: 100%;
      }
    }

    .c-mosaik__item {
      flex: 1 0 calc(50% - .15rem);
      width: 50%;
      height: 50%;
    }
  }

  &__item {
    display: flex;
    flex: 1 0;
    height: 100%;

    position: relative;
    overflow: hidden;

    figure {
      width: 100%;
      margin: 0;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
    }
  }

  &__cta {
    position: absolute;
    top: 1rem;
    right: 1rem;

    @media (min-width: map-get($grid-breakpoints, md)) {
      bottom: 2rem;
      right: 2rem;
      top: unset;
    }
  }

  .c-chips {
    position: absolute;
    bottom: 2rem;
    left: 2rem;

    .c-chip {
      padding: 6px 14px;
    }
  }

}