/* =========================================================
   TOE BEANS DESIGN SYSTEM
   LAYOUT
   ========================================================= */

.ds-container {

  width:
    min(
      var(--ds-content-width),
      calc(100% - 40px)
    );

  margin:
    0 auto;

}


.ds-page {

  min-height:
    100vh;

  padding:
    40px 0 80px;

  background:
    var(--ds-background);

  color:
    var(--ds-text);

}


.ds-section {

  margin-top:
    48px;

}


.ds-section-header {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-end;

  gap:
    20px;

  margin-bottom:
    20px;

}


.ds-section-header h2 {

  margin:
    0 0 5px;

}


.ds-section-header p {

  margin:
    0;

  color:
    var(--ds-muted);

}


.ds-example-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(250px, 1fr)
    );

  gap:
    18px;

}


.ds-demo-panel {

  padding:
    24px;

  border:
    1px solid
    var(--ds-border);

  border-radius:
    var(--ds-radius-lg);

  background:
    var(--ds-surface);

  box-shadow:
    var(--ds-shadow-sm);

}


.ds-demo-panel > h3 {

  margin:
    0 0 16px;

}


.ds-stack {

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    12px;

}


.ds-vertical-stack {

  display:
    grid;

  gap:
    14px;

}