.p5-section {
  display: grid;
  contain: content;
}
.p5-section[nocontain] {
  contain: inherit;
}
.p5-section {
  grid-template-columns: 1fr min(var(--p5-section-content-width, 1024px), calc(100% - 2 * var(--p5-spacing-unit))) 1fr;
  grid-column-gap: var(--p5-spacing-unit);
}

.p5-section:not([no-vertical-padding]) {
  padding-top: var(--p5-spacing-unit);
  padding-bottom: var(--p5-spacing-unit);
}
.p5-section[large-vertical-padding] {
  padding-top: calc(var(--p5-spacing-unit) * 2);
  padding-bottom: calc(var(--p5-spacing-unit) * 2);
}

.p5-section > * {
  grid-column: 2;
  /* this prevent content of the grid item from growing */
  /* https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items */
  min-width: 0; 
}
.p5-section > .full-bleed {
  grid-column: 1 / -1;
  width: 100%;
}
@media screen and (max-width: 732px) {
  .p5-section > .mobile-full-bleed {
    grid-column: 1 / -1;
    width: 100%;
  }
}
.p5-section > .padded-full-bleed {
  grid-column: 1 / -1;
  width: 100%;
  padding-left: var(--p5-spacing-unit);
  padding-right: var(--p5-spacing-unit);
}

.p5-collection {
  contain: content;
  display: grid;
  justify-content: center;
  grid-gap: var(--p5-spacing-unit);
  grid-template-columns: repeat(auto-fit, minmax(var(--p5-collection-min-item-width, 250px), 1fr));
}

/* @media screen and (min-width: 732px) {
  .p5-collection {
    grid-template-columns: repeat(auto-fit, minmax(var(--p5-collection-min-item-width, 250px), 1fr));
  }
} */

.light-text {
  color: var(--textLight);
}
.small-text {
  font-size: var(--smallSize);
  line-height: var(--smallLineHeight);
}

p5-button[color=primary] ux-icon {
  color: var(--primary);
}
p5-button[color=accent] ux-icon {
  color: var(--accent);
}
p5-button.rounded::part(button) {
  padding: 0;
  width: 42px;
  height: 42px;
  border-radius: 100%;
}


/*# sourceMappingURL=../app~b88f4497.c8b0477cb11acf4836ef.bundle.map*/