:root {
  --scaffold-gap: 1rem;
  --scaffold-gap-sm: 0.5rem;
  --scaffold-gap-md: 1rem;
  --scaffold-gap-lg: 2rem;
}

.scaffold-grid {
  --scaffold-cols: repeat(12, 1fr);
  display: grid;
  grid-template-columns: var(--scaffold-cols, repeat(12, 1fr));
  row-gap: var(--scaffold-row-gap, var(--scaffold-gap, 1rem));
  column-gap: var(--scaffold-col-gap, var(--scaffold-gap, 1rem));
}

.scaffold-gap-sm {
  gap: var(--scaffold-gap-sm);
}

.scaffold-gap-md {
  gap: var(--scaffold-gap-md);
}

.scaffold-gap-lg {
  gap: var(--scaffold-gap-lg);
}

.scaffold-grid-span-full {
  grid-column: 1/-1;
}

.scaffold-grid-span-half {
  grid-column: span 6;
}

.scaffold-grid-span-third {
  grid-column: span 4;
}

.scaffold-grid-span-two-thirds {
  grid-column: span 8;
}

.scaffold-grid-span-quarter {
  grid-column: span 3;
}

.scaffold-grid-span-three-quarters {
  grid-column: span 9;
}

@media (min-width: 640px) {
  .sm\:scaffold-grid-span-full {
    grid-column: 1/-1;
  }
}
@media (min-width: 640px) {
  .sm\:scaffold-grid-span-half {
    grid-column: span 6;
  }
}
@media (min-width: 640px) {
  .sm\:scaffold-grid-span-third {
    grid-column: span 4;
  }
}
@media (min-width: 640px) {
  .sm\:scaffold-grid-span-two-thirds {
    grid-column: span 8;
  }
}
@media (min-width: 640px) {
  .sm\:scaffold-grid-span-quarter {
    grid-column: span 3;
  }
}
@media (min-width: 640px) {
  .sm\:scaffold-grid-span-three-quarters {
    grid-column: span 9;
  }
}
@media (min-width: 768px) {
  .md\:scaffold-grid-span-full {
    grid-column: 1/-1;
  }
}
@media (min-width: 768px) {
  .md\:scaffold-grid-span-half {
    grid-column: span 6;
  }
}
@media (min-width: 768px) {
  .md\:scaffold-grid-span-third {
    grid-column: span 4;
  }
}
@media (min-width: 768px) {
  .md\:scaffold-grid-span-two-thirds {
    grid-column: span 8;
  }
}
@media (min-width: 768px) {
  .md\:scaffold-grid-span-quarter {
    grid-column: span 3;
  }
}
@media (min-width: 768px) {
  .md\:scaffold-grid-span-three-quarters {
    grid-column: span 9;
  }
}
@media (min-width: 1024px) {
  .lg\:scaffold-grid-span-full {
    grid-column: 1/-1;
  }
}
@media (min-width: 1024px) {
  .lg\:scaffold-grid-span-half {
    grid-column: span 6;
  }
}
@media (min-width: 1024px) {
  .lg\:scaffold-grid-span-third {
    grid-column: span 4;
  }
}
@media (min-width: 1024px) {
  .lg\:scaffold-grid-span-two-thirds {
    grid-column: span 8;
  }
}
@media (min-width: 1024px) {
  .lg\:scaffold-grid-span-quarter {
    grid-column: span 3;
  }
}
@media (min-width: 1024px) {
  .lg\:scaffold-grid-span-three-quarters {
    grid-column: span 9;
  }
}
@media (min-width: 1280px) {
  .xl\:scaffold-grid-span-full {
    grid-column: 1/-1;
  }
}
@media (min-width: 1280px) {
  .xl\:scaffold-grid-span-half {
    grid-column: span 6;
  }
}
@media (min-width: 1280px) {
  .xl\:scaffold-grid-span-third {
    grid-column: span 4;
  }
}
@media (min-width: 1280px) {
  .xl\:scaffold-grid-span-two-thirds {
    grid-column: span 8;
  }
}
@media (min-width: 1280px) {
  .xl\:scaffold-grid-span-quarter {
    grid-column: span 3;
  }
}
@media (min-width: 1280px) {
  .xl\:scaffold-grid-span-three-quarters {
    grid-column: span 9;
  }
}
.scaffold-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--scaffold-gap, 1rem);
}

.scaffold-flex-col {
  flex-direction: column;
}

.scaffold-flex-nowrap {
  flex-wrap: nowrap;
}

@media (min-width: 640px) {
  .sm\:scaffold-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--scaffold-gap, 1rem);
  }
  .sm\:scaffold-flex-col {
    flex-direction: column;
  }
  .sm\:scaffold-flex-nowrap {
    flex-wrap: nowrap;
  }
}
@media (min-width: 768px) {
  .md\:scaffold-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--scaffold-gap, 1rem);
  }
  .md\:scaffold-flex-col {
    flex-direction: column;
  }
  .md\:scaffold-flex-nowrap {
    flex-wrap: nowrap;
  }
}
@media (min-width: 1024px) {
  .lg\:scaffold-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--scaffold-gap, 1rem);
  }
  .lg\:scaffold-flex-col {
    flex-direction: column;
  }
  .lg\:scaffold-flex-nowrap {
    flex-wrap: nowrap;
  }
}
@media (min-width: 1280px) {
  .xl\:scaffold-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--scaffold-gap, 1rem);
  }
  .xl\:scaffold-flex-col {
    flex-direction: column;
  }
  .xl\:scaffold-flex-nowrap {
    flex-wrap: nowrap;
  }
}
.scaffold-items-start {
  align-items: flex-start;
}

.scaffold-items-center {
  align-items: center;
}

.scaffold-items-end {
  align-items: flex-end;
}

.scaffold-items-stretch {
  align-items: stretch;
}

.scaffold-justify-start {
  justify-content: flex-start;
}

.scaffold-justify-center {
  justify-content: center;
}

.scaffold-justify-end {
  justify-content: flex-end;
}

.scaffold-justify-between {
  justify-content: space-between;
}

.scaffold-justify-around {
  justify-content: space-around;
}

.scaffold-self-start {
  align-self: flex-start;
}

.scaffold-self-center {
  align-self: center;
}

.scaffold-self-end {
  align-self: flex-end;
}

.scaffold-self-stretch {
  align-self: stretch;
}

:root {
  --scaffold-container-width: 1280px;
  --scaffold-container-padding: 1.5rem;
  --scaffold-container-padding-sm: 1rem;
}

.scaffold-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--scaffold-container-padding-sm, 1rem);
  max-width: var(--scaffold-container-width, 1280px);
}
@media (min-width: 768px) {
  .scaffold-container {
    padding-inline: var(--scaffold-container-padding, 1.5rem);
  }
}

.scaffold-container-full {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--scaffold-container-padding-sm, 1rem);
}
@media (min-width: 768px) {
  .scaffold-container-full {
    padding-inline: var(--scaffold-container-padding, 1.5rem);
  }
}

/*# sourceMappingURL=scaffold.css.map */