.card {
  container-type: inline-size;

  h2, h3, h4 {
    margin: 0 0 10px 0;
    padding: 0;
    color: var(--primary-darker);
    font-family: 'Geologica', sans-serif;
    font-size: 26px;

    a {
      color: var(--primary-darker);

      &:hover {
        color: var(--primary);
      }
    }
  }

  .card-media {
    margin-bottom: 15px;
  }

  @container (width > 800px) {
    .card-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;

      .card-media {
        margin-bottom: 0px;
      }
    }
  }
}
