.tile {
  grid-column: span 12;
  padding: var(--anrt-spacing-025) var(--anrt-spacing-025) var(--anrt-spacing-050) var(--anrt-spacing-025);
}

.tile a.tile__link {
  position: relative;
  display: block;
  height: 100%;
  padding: var(--anrt-spacing-100) var(--anrt-spacing-100) var(--anrt-spacing-250) var(--anrt-spacing-100);
  text-decoration: none;
  color: var(--anrt-color-black);
  border-radius: var(--anrt-radius);
  background: var(--anrt-color-white);
  box-shadow: 0 4px 4px rgb(0 0 0 / 0.25);
}

.tile a:hover {
  box-shadow: 0 8px 8px rgb(0 0 0 / 0.15);
}

.tile a::after {
  position: absolute;
  right: var(--anrt-spacing-100);
  bottom: var(--anrt-spacing-150);
  display: block;
  width: calc(100% - var(--anrt-spacing-150));
  height: var(--anrt-spacing-075);
  content: "";
  background: url(../../../assets/icons/svg/custom/link-arrow--black.svg) no-repeat center right;
  background-size: contain;
}

.tile a:hover::after {
  background-image: url(../../../assets/icons/svg/custom/link-arrow--blue.svg);
}

@media (min-width: 64rem) {
  .tile {
    grid-column: span 6;
  }
  .tile a {
    padding: var(--anrt-spacing-150) var(--anrt-spacing-150) var(--anrt-spacing-300) var(--anrt-spacing-150);
  }
  .tile a::after {
    right: var(--anrt-spacing-150);
    bottom: var(--anrt-spacing-150);
  }
}

@media (min-width: 80rem) {
  .tile {
    grid-column: span 4;
  }
}

.tile__title {
  margin-bottom: var(--anrt-spacing-100);
  font-size: var(--anrt-font-size-150);
}

@media (min-width: 64rem) {
  .tile__title {
    font-size: var(--anrt-font-size-200);
  }
}

.tile__body {
  font-size: var(--anrt-font-size-100);
}