.tiles {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 22px;

  @media (max-width: 900px) { grid-template-columns: 1fr 1fr; }
  @media (max-width: 560px) { grid-template-columns: 1fr; }
}

.tile {
  display: flex; flex-direction: column; text-decoration: none; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  transition: box-shadow .15s, transform .15s;

  &:hover { box-shadow: 0 14px 30px rgba(11,76,120,.13); transform: translateY(-2px); }
  .im {
    aspect-ratio: 16/10; background: var(--tint-2); overflow: hidden;

    img { width: 100%; height: 100%; object-fit: cover; display: block; }
  }
  .bd { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
  h3 { color: var(--ink); }
  h2 { color: var(--ink); font-size: 22px; font-weight: 600; }
  p { color: var(--muted); font-size: 15.5px; line-height: 1.45; }
  .more { margin-top: auto; padding-top: 8px; color: var(--blue); font-weight: 600; font-size: 15px; }
}