@mixin cardImage {
  align-items: baseline;
  display: grid;
  grid-row: 1;
  grid-template-areas: 'image' 'body' 'footer';
  grid-template-rows: minmax(auto, 180px) auto min-content;
  row-gap: var(--spacing-s);
  max-width: 400px;
}

.bd-card-image {
  @include cardImage;

  picture {
    align-self: baseline;
    grid-area: image;

    img {
      border-radius: 16px;
      height: 100%;
      width: 100%;
    }
  }

  &__body {
    font-size: var(--font-size-21);
    font-weight: var(--semi-bold);
    grid-area: body;
    line-height: 1.14;

    @include media('large') {
      font-size: var(--font-size-18);
      line-height: 1.33;
    }

    @include media('xlarge') {
      font-size: var(--font-size-21);
      line-height: 1.14;
    }
  }

  &__footer {
    font-size: 14px;
    font-weight: var(--light);
    grid-area: footer;
    letter-spacing: 0.2px;
    line-height: 1.71;

    @include media('large') {
      font-size: 12px;
      line-height: 2;
    }

    @include media('xlarge') {
      font-size: 14px;
      line-height: 1.71;
    }
  }

  @include media('large') {
    height: fit-content;

    &--one {
      grid-column: 1 / span 4;
      grid-row: 3 / span 3;
      justify-self: end;
    }

    &--two {
      grid-column: 5 / span 2;
      grid-row: 2 / span 3;
    }

    &--three {
      grid-column: 7 / span 2;
      grid-row: 1 / span 3;
    }

    &--four {
      grid-column: 7 / span 4;
      grid-row: 4 / span 3;
    }

    &--two,
    &--three {
      picture {
        display: none;
      }
    }
  }

  &-group {
    --spacer-inline: calc(var(--spacing-xs) * 1.25);
    display: grid;
    gap: calc(var(--spacing-xs) * 1.25);
    grid-auto-columns: 49vmax;
    left: calc(var(--spacer-inline) * -1);
    margin-block-start: var(--spacing-xl);
    overflow-x: scroll;
    padding: var(--spacing-l) var(--spacer-inline);
    position: relative;
    scroll-snap-type: x proximity;
    width: 102vw;

    &::-webkit-scrollbar {
      display: none;
    }

    @include media('medium') {
      --spacer-inline: var(--spacing-l);
      gap: var(--spacing-xs);
    }

    @include media('large') {
      gap: var(--spacing-s);
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(6, 1fr);
      left: unset;
      margin-block-start: -10rem;
      overflow: visible;
      padding: unset;
      width: 100%;
    }

    @include media('xlarge') {
      gap: calc(var(--spacing-s) * 1.25);
    }
  }
}
