.view-toggle-btn {
  color: #6b7280;
}

.view-toggle-btn.active {
  background: #7c3aed;
  color: #fff;
}

.view-toggle-btn:hover:not(.active) {
  color: #e5e5e5;
}

#posts-feed.view-feed {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

#posts-feed.view-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.25rem;
}

@media (min-width: 640px) {
  #posts-feed.view-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  #posts-feed.view-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.view-feed .post-excerpt {
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  display: block !important;
}

.view-feed .post-image {
  max-height: 500px;
}

.view-grid .post-image {
  max-height: 240px;
}