.hero {
  --accent-radius: 8px;
  --frame-radius: 16px;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  grid-template-rows: 8px 1fr 8px;

  margin-bottom: 2.5rem;

  /* ----------------------------------------------------------
               Декоративные оранжевые полоски сверху и снизу
               ---------------------------------------------------------- */

  &::before,
  &::after {
    content: "";
    grid-column: 2/3;
    background-color: orange;
    inset: 0;
    z-index: 1;
  }

  &::before {
    border-radius: var(--accent-radius) var(--accent-radius) 0 0;
  }

  &::after {
    border-radius: 0 0 var(--accent-radius) var(--accent-radius);
  }

  /* ----------------------------------------------------------
               Серая рамка-подложка с градиентом
               ---------------------------------------------------------- */

  .frame {
    grid-column: 1/-1;
    grid-row: 2/3;
    background: linear-gradient(0deg, #666 1%, #b0b0b0 67%, #9e9e9e 100%);
    padding: 0.7rem;
    border-radius: var(--frame-radius);
  }

  /* Сетка карточек */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 200px;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;

    /* Растягиваем карточку */
    li {
      display: grid;
    }
  }

  /* Карточка-ссылка */
  .card-link {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    text-decoration: none;

    .card-image {
      position: absolute;
      width: 100%;
      height: 100%;
      inset: 0;
      object-fit: cover;
      display: block;
      transition: transform 0.3s ease;
    }

    /* & нужен — псевдоэлемент самой карточки */
    /* Градиентный оверлей */
    &::after {
      content: "";
      /* Обязательно для отображения псевдоэлемента */
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2) 30%,
        /* Прозрачный сверху */ rgba(0, 0, 0, 0.9) 100% /* Тёмный снизу */
      );
      /* Пропускаем клики через градиент */

      pointer-events: none;
    }

    &:hover .card-image {
      transform: scale(1.05);
    }

    &:hover .card-description {
      color: rgb(240, 240, 240);
    }
  }

  /* Текстовый контент карточки */
  .card-content {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 2/4;
    z-index: 2;
    color: white;
    padding-inline: 0.75rem;
  }

  .card-title,
  .card-description {
    margin: 0;
    padding-bottom: 0.75rem;
  }

  .card-title {
    align-self: end;
    color: rgb(240, 240, 240);
    font-size: 1.4rem;
  }

  .card-description {
    color: rgb(200 200 200);
    transition: color 0.3s ease;
  }

  @media (max-width: 640px) {
    .card-grid {
      grid-template-columns: 1fr;
    }

    /* Градиентный оверлей */
    .card-link::after {
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.4) 50%,
        /* Прозрачный сверху */ rgba(0, 0, 0, 0.9) 100% /* Тёмный снизу */
      );
    }
  }
}