:root {
  --grid-columns: 4;
  --grid-gutter: var(--spacing-16);
}

@media (min-width: 768px) {
  :root { --grid-columns: 12; }
}

@media (min-width: 1280px) {
  :root { --grid-gutter: var(--spacing-24); }
}

.container {
  box-sizing: border-box;
  width: 100%;
  margin-inline: auto;
  --container-pad: var(--spacing-20);
  padding-inline: var(--container-pad);
}

@media (min-width: 1280px) {
  .container {
    max-width: 1440px;
    --container-pad: 64px;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

.bp-container { container-type: inline-size; }

.bp-scope {
  --grid-columns: 4;
  --grid-gutter: var(--spacing-16);
  --bp-tablet: 0;
  --bp-desktop: 0;
  --only-desktop: none;
  --below-desktop: flex;
  --only-tablet: none;
  --only-mobile: inline;
  --from-tablet: none;
  --from-tablet-flex: none;
  --below-tablet-flex: flex;
  --bp-mlandscape: 0;
  --bp-tlandscape: 0;
  --from-mlandscape: none;
  --below-mlandscape: inline;
  --from-tlandscape: none;
  --below-tlandscape: flex;
  --sticky-below-tablet: sticky;
  --absolute-from-tablet: static;
  --scrollx-below-desktop: auto;
  --scrollx-below-tablet: auto;
}

@container (min-width: 536px) {
  .bp-scope {
    --bp-mlandscape: 1 !important;
    --from-mlandscape: inline !important;
    --below-mlandscape: none !important;
  }
}

@container (min-width: 728px) {
  .bp-scope {
    --grid-columns: 12 !important;
    --bp-tablet: 1 !important;
    --only-tablet: inline !important;
    --only-mobile: none !important;
    --from-tablet: block !important;
    --from-tablet-flex: flex !important;
    --below-tablet-flex: none !important;
    --sticky-below-tablet: static !important;
    --absolute-from-tablet: absolute !important;
    --scrollx-below-tablet: visible !important;
  }
}

@container (min-width: 960px) {
  .bp-scope {
    --bp-tlandscape: 1 !important;
    --from-tlandscape: flex !important;
    --below-tlandscape: none !important;
  }
}

@container (min-width: 1152px) {
  .bp-scope {
    --grid-gutter: var(--spacing-24) !important;
    --bp-desktop: 1 !important;
    --only-desktop: flex !important;
    --below-desktop: none !important;
    --only-tablet: none !important;
    --scrollx-below-desktop: visible !important;
  }
}

.bp-scope {
  --bleed-below-tablet:  calc((1 - var(--bp-tablet))  * var(--container-pad, 0px));
  --bleed-below-desktop: calc((1 - var(--bp-desktop)) * var(--container-pad, 0px));
  --bleed: 0px;
}

.bleed {
  align-self: stretch;
  width: auto;
  margin-inline: calc(-1 * var(--bleed));
  padding-inline: var(--bleed);
  scroll-padding-inline: var(--bleed);
}