@layer hpds-layout {
  .hpds-container {
    inline-size: min(100% - (2 * var(--hpds-gutter)), var(--hpds-container-default));
    margin-inline: auto;
  }

  .hpds-container--wide { max-inline-size: var(--hpds-container-wide); }
  .hpds-container--narrow { max-inline-size: var(--hpds-container-narrow); }

  .hpds-section {
    padding-block: var(--hpds-section-space);
  }

  .hpds-section--compact { padding-block: clamp(2rem, 5vw, 3.5rem); }
  .hpds-section--flush { padding-block: 0; }
  .hpds-section--subtle { background: var(--hpds-color-surface-subtle); }
  .hpds-section--inverse { background: var(--hpds-color-brand); color: var(--hpds-color-surface); }

  .hpds-stack {
    display: flex;
    flex-direction: column;
    gap: var(--hpds-stack-gap, var(--hpds-space-5));
  }

  .hpds-cluster {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--hpds-cluster-gap, var(--hpds-space-3));
  }

  .hpds-cluster--between { justify-content: space-between; }
  .hpds-cluster--center { justify-content: center; }

  .hpds-grid {
    display: grid;
    gap: var(--hpds-grid-gap, var(--hpds-space-5));
    grid-template-columns: repeat(var(--hpds-grid-columns, 3), minmax(0, 1fr));
  }

  .hpds-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hpds-grid-min, 16rem)), 1fr));
  }

  .hpds-split {
    align-items: center;
    display: grid;
    gap: clamp(var(--hpds-space-6), 6vw, var(--hpds-space-9));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .hpds-split--reverse > :first-child { order: 2; }

  .hpds-sidebar-layout {
    display: grid;
    gap: var(--hpds-space-7);
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  }

  .hpds-frame {
    aspect-ratio: var(--hpds-frame-ratio, 1 / 1);
    overflow: hidden;
    position: relative;
  }

  .hpds-divider {
    border: 0;
    border-block-start: var(--hpds-border);
    margin-block: var(--hpds-space-6);
  }

  @media (max-width: 1024px) {
    .hpds-grid { --hpds-grid-columns: 2; }
    .hpds-sidebar-layout { grid-template-columns: 1fr; }
  }

  @media (max-width: 767px) {
    .hpds-grid { --hpds-grid-columns: 1; }
    .hpds-split { grid-template-columns: 1fr; }
    .hpds-split--reverse > :first-child { order: initial; }
  }
}