.collage__images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(8, 1fr);
  grid-template-areas:
    'alpha beta  gamma   gamma'
    'alpha beta  gamma   gamma'
    'delta delta gamma   gamma'
    'delta delta epsilon epsilon'
    'delta delta epsilon epsilon'
    'delta delta epsilon epsilon'
    'delta delta zeta    zeta'
    'delta delta zeta    zeta';
  grid-gap: var(--curvy-inset);
  @media (min-width: 769px) and (max-width: 1152px) {
    grid-gap: var(--2);
  }
  @media (max-width: 768px) {
    grid-gap: var(--1);
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(16, 1fr);
    grid-template-areas:
      'alpha   beta'
      'alpha   beta'
      'delta   delta'
      'delta   delta'
      'delta   delta'
      'delta   delta'
      'delta   delta'
      'delta   delta'
      'gamma   gamma'
      'gamma   gamma'
      'gamma   gamma'
      'epsilon epsilon'
      'epsilon epsilon'
      'epsilon epsilon'
      'zeta    zeta'
      'zeta    zeta';
  }

  transition: grid-gap 0.25s;
}

.collage--edgy .collage__images,
.collage--strokey .collage__images {
  grid-gap: 4px;
}

.collage__image:nth-child(1) {
  grid-area: delta;
}

.collage__image:nth-child(2) {
  grid-area: epsilon;
}

.collage__image:nth-child(3) {
  grid-area: gamma;
}

.collage__image:nth-child(4) {
  grid-area: zeta;
}

.collage__image:nth-child(5) {
  grid-area: alpha;
}

.collage__image:nth-child(6) {
  grid-area: beta;
}

.collage__image img {
  vertical-align: bottom;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--curvynes);
  transition: border-radius 0.25s;
}