#feeds-panel {
  background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 20%, rgba(239, 244, 250, 1) 80%);
}

{# LATEST POSTS #}
@media (min-width: 768px) {
  #blog-feed .blog-feed-post:first-of-type {
    grid-column: 1 / span 2;
    border-radius: var(--s-1);
    overflow: clip;
    color: white;
    background-color: oklch(from var(--coolblue) var(--l700) c h);
    img {
      border-radius: var(--s-2) var(--s-2) 0 0;
    }
    &:hover {
      color: white;
    }
    .grow {
      padding: var(--s-2);
    }
    .blog-feed-title {
      font-size: var(--h2)
    }
    .blog-feed-desc {
      font-size: var(--h5)
    }
  }
  #blog-feed .blog-feed-post:not(:first-of-type) .blog-feed-desc,
  #blog-feed .blog-feed-post:not(:first-of-type) .blog-feed-date {
    font-size: var(--t-sm);
  }

}
@media (min-width: 1024px) {
  #blog-feed .blog-feed-post:first-of-type {
    grid-row: 1 / span 2;
  }
}