.card {
  display: flex;
  flex-direction: column;
  position: relative;
}

.card__image {
  border-radius: var(--border-radius);
  overflow: hidden;
}

.card__content {
  margin-top: var(--spacing-2);
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  .card__pill {
    width: fit-content;
    margin-bottom: var(--spacing-1-5);
  }

  .card__heading {
    margin: 0 0 var(--spacing-half) 0;
  }

  .card__heading a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 100%;
    cursor: pointer;
  }

  .card__description {
    margin: 0 0 var(--spacing-1-5);
  }

  .card__metadata {
    display: flex;
    align-items: center;
    margin-top: auto;

    .card__published-date,
    .card__reading-time {
      font-size: var(--text-small);
    }

    .card__published-date {
      margin-right: var(--spacing-3);
    }

    .card__reading-time {
      display: flex;
      align-items: center;
      margin: 0;

      .reading-time {
        display: inline-block;
        margin-right: var(--spacing-half);
      }

      .reading-time__icon {
        margin-right: var(--spacing);

        svg {
          width: var(--spacing-2-5);
          height: var(--spacing-2-5);
        }
      }
    }
  }
}

@media (min-width: 768px) {
  .card__content {
    margin-top: var(--spacing-3);
  }
}

@media (min-width: 1440px) {
  .card__content {
    margin-top: var(--spacing-4);

    .card__pill {
      margin-bottom: var(--spacing-2);
    }

    .card__heading {
      margin-bottom: var(--spacing);
    }

    .card__description {
      margin: 0 0 var(--spacing-2);
    }
  }
}

@media (min-width: 1920px) {
  .card__content {
    margin-top: var(--spacing-5);
  }
}