/* Default vars, might be overwritten in the block */
:root {
  --ssp-podcast-list-title-size: 16px;
  --ssp-podcast-list-article-margin-bottom: 40px;
  --ssp-podcast-list-gap: 10px;
  --ssp-podcast-list-cols: 1;
}

.ssp-podcast-list__articles {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ssp-podcast-list-gap);
}
.ssp-podcast-list__pagination {
  display: flex;
  justify-content: space-between;
}
.ssp-podcast-list article {
  display: flex;
  flex-direction: column;
  flex-basis: calc((100% - var(--ssp-podcast-list-gap) * (var(--ssp-podcast-list-cols) - 1)) / var(--ssp-podcast-list-cols));
  margin-bottom: var(--ssp-podcast-list-article-margin-bottom);
  min-width: 100px;
}
.ssp-podcast-list article h3 {
  font-size: var(--ssp-podcast-list-title-size);
}
@media (max-width: 1024px) {
  .ssp-podcast-list article {
    flex-basis: calc((100% - var(--ssp-podcast-list-gap) * (max(2, var(--ssp-podcast-list-cols)) / 2 - 1)) / (max(2, var(--ssp-podcast-list-cols)) / 2));
  }
}
@media (max-width: 480px) {
  .ssp-podcast-list article {
    flex-basis: 100%;
  }
}