.event {
  display: inline-grid;
  grid-template-rows: auto 1fr;
  inline-size: 100%;

  .event-image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 8px;

    .event-badge {
      position: absolute;
      background-color: var(--color-secondary);
      font-size: var(--font-small);
      text-align: center;
      font-weight: 700;
      inset-block-start: var(--spacing-xs);
      padding-inline: var(--spacing-s);
      border-radius: 6px;
      display: flex;
      align-items: center;

      p {
        font: inherit;
      }

      &:empty {
        display: none;
      }
    }

    .event-badge:nth-child(1) {
      padding-block: var(--spacing-xs);
      inset-inline-start: var(--spacing-xs);
    }

    .event-badge:nth-child(2) {
      aspect-ratio: 1 / 1;
      inset-inline-end: var(--spacing-xs);
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .event-content {
    margin-block-start: var(--spacing-m);

    h3 {
      padding-block-end: var(--spacing-s);
    }

    .event-meta {
      display: flex;
      gap: var(--spacing-m);

      &:last-of-type {
        margin-block-start: var(--spacing-xs);
      }
    }

    .internal-link {
      margin-block-start: var(--spacing-m);
    }
  }
}

@media (max-width: 768px) {
  .event {
    width: 100%;
  }
}