.campaign-list-page {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-xl);
}

.campaign-list-page__header {
  max-inline-size: 48rem;
}

.campaign-list-page__title {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin: 0;
}

.campaign-list-page__heading-icon {
  flex: 0 0 auto;
  inline-size: 2.375rem;
  block-size: 2.375rem;
}

.campaign-list-page__pager {
  display: flex;
  justify-content: center;
}

.campaign-list-page__pager-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (width < 32rem) {
  .campaign-list-page {
    gap: var(--space-l);
    padding-block: var(--space-l);
  }

  .campaign-list-page__pager-list {
    inline-size: 100%;
  }
}

.campaign-list-page .campaign-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.625rem;
}

@media (width <= 75rem) {
  .campaign-list-page .campaign-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (width <= 56.25rem) {
  .campaign-list-page .campaign-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width <= 36rem) {
  .campaign-list-page .campaign-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}