#topics {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

#topicGrid {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 16px;
}

@media (min-width: 768px) {
  #topics {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .topic-card {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .topic-card.list-item {
    flex: 1 1 calc(100% - 32px); /* full width minus gap */
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  #topicGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
    gap: 16px; /* handles both row and column spacing */
    padding: 0; /* remove container padding to avoid left gap */
  }

  #topicGrid .topic-card {
    width: 100%; /* fill grid cell */
    padding: 16px; /* ✅ internal spacing for card content */
    box-sizing: border-box;
    background-color: #f9f9fc; /* optional visual clarity */
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
}