.wrapper {
  width: min(100% - (2 * var(--space-4)), var(--max-width));
  margin-inline: auto;
}

.site-header {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-3);
}

.header-inner {
  justify-content: space-between;
  align-items: center;
}

.site-main {
  padding-block: var(--space-6);
}

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-4);
  margin-top: var(--space-7);
}

.footer-inner {
  justify-content: space-between;
}

@media (min-width: 48rem) {
  .filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }
}

@media (min-width: 70rem) {
  .filter-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}