.post-grid {
  display: grid;
  gap: 2em;

  @media (width >= 500px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5em;
  }

  @media (width >= 768px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

article.post-card {
  position: relative;
  .post-card--img {
    height: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 55%;
    position: relative;

    img {
      height: 100%;
      object-fit: cover;
      position: absolute;
      inset: 0;
      width: 100%;
    }
  }

  .post-card--tags {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    span {
      background-color: var(--light-grey);
      border-radius: 17px;
      color: var(--dark-grey);
      font-size: 0.6em;
      padding: 0.5rem 1rem;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
  }

  h3 {
    font-size: clamp(1.2rem, 3vw, 1.4rem);
    font-family: var(--cabinSemiBold);
    line-height: 1.4em;
    margin: 1rem 0 0.5rem;
  }

  p.post-card--excerpt {
    color: var(--dark-grey);
  }

  p:last-child {
    margin: 0;
  }

  a {
    color: var(--light-black);
    &:after {
      content: "";
      height: 100%;
      inset: 0;
      position: absolute;
      width: 100%;
    }

    &:hover {
      text-decoration: underline;
      text-underline-offset: 8px;
      text-decoration-thickness: 1px;
    }
  }
}