:root {
  --tile-aspect-ratio: 1 / 1;
  --tile-background-color: var(--color-orange-light);
  --tile-highlight-color: var(--color-orange);
  --tile-image-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  --tile-image-zoom: 1;
}

.tile {
  aspect-ratio: var(--tile-aspect-ratio);
  background-color: var(--tile-background-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  &:focus-within:not(.has-invisible-focus-within) {
    @include use-focus-outline();
  }

  &.has-overlay-link:is(:hover, :focus-within) {
    --tile-image-zoom: 1.1;
  }
}

.tile--cyan {
  --tile-background-color: var(--color-cyan-light);
}

.tile--green {
  --tile-background-color: var(--color-green-light);
}

.tile--yellow {
  --tile-background-color: var(--color-yellow-light);
}

.tile--purple {
  --tile-background-color: var(--color-purple-light);
}

.tile--blue {
  --tile-background-color: var(--color-blue-light);
}

.tile--red {
  --tile-background-color: var(--color-red-light);
}

.tile--image {
  --tile-highlight-color: var(--color-white);

  position: relative;
}

.tile__hint-box {
  --hint-box-width: 100%;
  --hint-box-padding-inline: 2rem;
  --hint-box-height: 11rem;
  --hint-box-font-size: 2.2rem;
}

.tile__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  padding: 2rem;
  text-align: center;

  .tile--image & {
    color: var(--color-white);
    position: relative;
    z-index: 4;
  }
}

.tile__icon {
  color: var(--tile-highlight-color);
  font-size: 5rem;
  margin-block-end: 2rem;
}

.tile__logo {
  inline-size: 80%;
  max-inline-size: 20rem;
}

.tile__headline {
  --line-clamp: 3;

  .tile--image & {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
  }
}

.tile__headline-count {
  color: var(--tile-highlight-color);
  display: block;
  font-family: var(--font-family-indie-flower);
  font-size: 7.5rem;
}

.tile__headline-text {
  font-size: 2.4rem;
  font-weight: var(--font-weight-semibold);
  hyphens: auto;
  line-height: var(--line-height-small);
}

.tile__button {
  --focus-outline-width: 0;
  --icon-button-size: 4.8rem;

  margin-block-start: 3rem;
}

.tile__image {
  inset: 0;
  position: absolute;
  transform: scale(var(--tile-image-zoom, 1));
  transition-property: transform;

  &::before {
    background-image: var(--tile-image-gradient);
    content: '';
    inset: 0;
    position: absolute;
    z-index: 3;
  }
}