/* Can't use CSS vars in media declarations, but sass-like variables */
/* DO work, so this is the only place they are used (postcss-simple-vars) */
/* 20em */
/* 48em */
/* 64em */
/* 52em */
/* 58.25em */
/* 90em */
/* 106.25em */
/* 120em */
/* Uses postcss-custom-media and postcss-media-minmax */
/* singles */
/* ups */
/* downs */
/* Mixins */
:root {
  --section-top-padding--mobile: var(--spacer1-5);
  --section-bottom-padding--mobile: var(--spacer1-5);
  --section-top-padding: var(--spacer4);
  --section-bottom-padding: var(--spacer4);
}
.c-section {
  padding-top: var(--section-top-padding--mobile);
  padding-bottom: var(--section-bottom-padding--mobile);
}
@media (min-width: 768px) {
.c-section {
    padding-top: var(--section-top-padding);
    padding-bottom: var(--section-bottom-padding)
}
  }
.c-section#featured {
    padding-top: var(--spacer);
    padding-bottom: var(--spacer3);
  }
.c-section#about {
    background-color: var(--gray-200);
    padding-top: var(--spacer3);
  }
.c-section#filters {
    background-color: var(--primary-teal);
  }
.c-section#filters h2 {
      --headings: var(--white);
    }
.c-section#recent .c-section__top {
      margin-bottom: 0;
    }
.c-section#recent h2 {
      margin: 0 auto;
    }
.c-section__top {
    --max-width--text: 46.25rem;

    margin-bottom: var(--spacer3);
  }
.c-section__top__inner {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--spacer2);
    }
/* Eyebrow */
.c-section__top span {
      font-family: var(--base-font);
      font-weight: var(--fw__medium);
      font-size: var(--fs__small);
      letter-spacing: var(--kern__looser);
      line-height: var(--lh__base);
      text-transform: uppercase;
      margin-bottom: -2.1875rem; /* reduces gap */
    }
.c-section .layout__region {
    width: 100%;
  }
/* Vertical spacing */
.c-section.vsp__top--none {
        --section-top-padding: 0;
      }
.c-section.vsp__top--small {
        --section-top-padding: var(--spacer);
      }
.c-section.vsp__top--medium {
        --section-top-padding: var(--spacer2);
      }
.c-section.vsp__bottom--none {
        --section-bottom-padding: 0;
      }
.c-section.vsp__bottom--small {
        --section-bottom-padding: var(--spacer);
      }
.c-section.vsp__bottom--medium {
        --section-bottom-padding: var(--spacer2);
      }