.hero-animated:has(+ .blog) {
  .container {
    >.header-underline {
      color: var(--color-pastel-green-400);
    }
  }
}

.blog {
  margin-top: var(--space-xxl);
  column-gap: var(--gutter);
  display: grid;
  row-gap: 0px;

  @media (min-width: 40rem) {
    .col {
      &.list {
        grid-column: span 6;
      }

      &.search {
        grid-column: span 2;
      }
    }
  }

  @media (min-width: 64rem) {
    .col {
      &.list {
        grid-column: span 9;
      }

      &.search {
        grid-column: span 3;
      }
    }
  }

  @media (min-width: 75rem) {
    .col {
      &.list {
        grid-column: span 6;
      }
    }
  }
}

@media (min-width: 40rem) {
  .blog {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 64rem) {
  .blog {
    grid-template-columns: repeat(12, 1fr);
  }
}

.blog-post-card {
  margin-bottom: var(--baseline);
  background-color: var(--color-white);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-iron-400);
  color: var(--color-downriver-400);
  padding: var(--space-lg) var(--gutter);
  scroll-margin-top: calc(var(--space-lg) + 1.5 * var(--baseline));

  div:not(:last-child):not(.tags) {
    margin-bottom: var(--baseline);
  }
}