#blog {
  .content {
    padding-block: 8rem 4rem;

    .heading {
      display: grid;
      gap: 1rem;
      grid-template-columns: auto 300px;
      justify-content: space-between;
      align-items: center;

      > * {
        grid-column: 1;
        margin: 0;
      }

      h2 {
        font-weight: 600;
        font-size: 3rem;
      }

      h4 {
        font-weight: 500;
        font-size: 1.75rem;
      }

      a {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        text-align: right;
      }
    }

    .posts {
      --subtle-color: #ADADAD;

      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      padding-top: 3.5rem;

      .post {
        display: grid;
        border: 1px solid black;
        text-decoration: none;
        cursor: pointer;

        img {
          background-color: black;
          width: 100%;
          object-fit: cover;
          height: 250px;
        }

        .post__content {
          display: grid;
          padding: 1rem;
          color: black;

          .post__description {
            font-size: .75rem;
            font-weight: 400;
            line-height: 1.125rem;
            border-bottom: 1px solid var(--subtle-color);

            a {
              text-decoration: underline;
            }
          }

          .post__date {
            display: flex;
            align-items: center;
            gap: .5rem;
            padding-top: 1rem;
            color: var(--subtle-color);
            font-size: .65rem;
          }
        }
      }
    }
  }
}