.textmedia-masonry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.textmedia-masonry__item {
  position: relative;
  height: 250px;
  border: 2px solid rgb(var(--c-primary-lighter));
  overflow: hidden;

  & img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &::before,
  &::after {
    position: absolute;
    content: "";
    display: block;
    height: 50%;
    left: 0;
    right: 0;
    bottom: 0;
  }

  &::before {
    background: linear-gradient(to bottom, rgba(var(--c-primary), 0) 0%, rgba(var(--c-primary), 0.3) 100%);
    z-index: 2;
  }

  &::after {
    background: linear-gradient(to bottom, rgba(var(--c-neutral-darkest), 0) 0%, rgba(var(--c-neutral-darkest), 0.8) 100%);
    z-index: 1;
  }
}

.textmedia-masonry__front .textmedia-masonry__headline {
  position: absolute;
  bottom: 10px;
  left: 15px;
  z-index: 3;
}

.textmedia-masonry__overlay {
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  right: 10px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(var(--c-primary), 0.9);
  color: rgb(var(--c-neutral-lightest));
  padding: 15px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.textmedia-masonry__headline {
  display: block;
  margin: 0;
  font-family: var(--f-family-2);
  font-weight: var(--f-weight-b);
  font-style: italic;
  font-size: 156%;
  color: rgb(var(--c-neutral-lightest));
  text-transform: uppercase;
  line-height: 120%;
}

.textmedia-masonry__overlay .textmedia-masonry__headline {
  margin-bottom: 10px;
}

.textmedia-masonry__text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 87%;
}

.textmedia-masonry__overlay .font__button {
  align-self: flex-start;
  margin-top: 1em;
  background: transparent;
  border-color: rgb(var(--c-neutral-lightest));
  font-size: 100%;
}

.textmedia-masonry__overlay .font__button,
.textmedia-masonry__overlay .font__button a {
  color: rgb(var(--c-neutral-lightest));
}

.textmedia-masonry__item:hover .textmedia-masonry__overlay,
.textmedia-masonry__item:focus-within .textmedia-masonry__overlay {
  opacity: 1;
}

.textmedia-masonry__item:hover .textmedia-masonry__front,
.textmedia-masonry__item:focus-within .textmedia-masonry__front {
  opacity: 0;
}

@media (hover: hover) {
  .textmedia-masonry__overlay .font__button:hover {
    background: rgb(var(--c-neutral-lightest));
  }

  .textmedia-masonry__overlay .font__button:hover,
  .textmedia-masonry__overlay .font__button:hover a {
    color: rgb(var(--c-primary));
  }
}

/* =============================================================================
   Media Queries
   ========================================================================== */

@media (min-width: 640px) {
  .textmedia-masonry {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "k1 k2"
      "k3 k3"
      "k4 k5";
  }

  .textmedia-masonry__item:nth-child(1) { grid-area: k1; }
  .textmedia-masonry__item:nth-child(2) { grid-area: k2; }
  .textmedia-masonry__item:nth-child(3) { grid-area: k3; }
  .textmedia-masonry__item:nth-child(4) { grid-area: k4; }
  .textmedia-masonry__item:nth-child(5) { grid-area: k5; }

  .textmedia-masonry__front .textmedia-masonry__headline {
    bottom: 15px;
    left: 20px;
  }

  .textmedia-masonry__overlay {
    padding: 20px;
  }
}

@media (min-width: 1024px) {
  .textmedia-masonry {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "k1 k3 k4"
      "k2 k3 k5";
    height: 640px;
  }

  .textmedia-masonry__item {
    height: auto;
  }

  .textmedia-masonry__front .textmedia-masonry__headline {
    bottom: 25px;
    left: 30px;
  }

  .textmedia-masonry__headline {
    font-size: 218%;
  }

  .textmedia-masonry__overlay {
    padding: 35px;
  }

  .textmedia-masonry__overlay .textmedia-masonry__headline {
    margin-bottom: 20px;
  }
}

@media (min-width: 1580px) {
  .textmedia-masonry__text {
    font-size: 91%;
  }
}