.Tiles {
  @media (min-width: $screen-lg) {
    display: grid;
    gap: $gutter;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

.TileItem {
  font-size: 0.875rem;
  margin-bottom: 30px;

  .TileItem__image {
    border: 0;
    display: block;
    padding: 0;
    margin-bottom: 10px;
    width: auto;
  }

  .TileItem__title {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 8px;
  }

  .TileItem__title-link {
    color: map-get($color-aliases, "text-base");
    text-decoration: none;
  }

  .TileItem__desc {
    font-size: 0.875rem;
    margin: 0 0 10px;
  }

  .TileItem__learn-more {
    font-size: 0.875rem;
    font-weight: bold;
  }

  .TileItem__list {
    font-weight: 500;
    line-height: map-get($line-heights, "heading");
    padding: 0; // override `.Article ul`
  }

  .TileItem__list-item {
    list-style: none;
    margin: 15px 0;

    .pill {
      position: relative;
      top: 4px;
    }
  }

  .TileItem__list-item-link {
    color: map-get($color-aliases, "text-base");
    text-decoration: none;

    &::after {
      content: "→";
      margin-left: 3px;
      opacity: 0.7;
      position: absolute;
      transition: transform 0.1s;
    }

    &:hover {
      color: map-get($color-aliases, "text-lightest");

      &::after {
        transform: translateX(2px);
      }
    }
  }
}
