.tile {
  height: 100%;
}

.tile__link {
  display: block;
  position: relative;
  display: grid;
  grid-template: 1fr / 1fr;
  align-items: end;
  border-radius: var(--border-radius);
  overflow: hidden;
  height: 100%;
}

.tile__title {
  grid-column: 1/-1;
  grid-row: 1/-1;
  z-index: 10;
  padding: var(--spacing-large);
  margin-bottom: 0;
  font-size: var(--font-size-responsive-x-large);
  font-family: var(--font-family-primary);
  color: var(--color-white);
}

.tile__background {
  grid-column: 1/-1;
  grid-row: 1/-1;
}

.tile__background img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.tile__background:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: var(--zevi-overlay-2);
}

.tile__link:hover {
  text-decoration: none;
}

.tile__link:hover .tile__title,
.tile__link:focus .tile__title {
  color: var(--color-black);
  text-decoration: none;
}

.tile__link:hover .tile__background:after,
.tile__link:focus .tile__background:after {
  background: var(--zevi-overlay-2-inverse);
}

/* For four column layout we change the aspect ratio. */
@media screen and (min-width: 40em) {
  .tiles__layout--four .tile__background img {
    aspect-ratio: 1 / 2;
  }
}