/* Add your global styles here */

/* bpn-layout: responsive stack */
.bpn-grid {
  container-type: inline-size;
  container-name: bpn-grid;
}
.bpn-flex {
  container-type: inline-size;
  container-name: bpn-flex;
}
.bpn-grid[data-columns="2"] {
  @container bpn-grid (min-width: 62rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.bpn-grid[data-columns="3"] {
  @container bpn-grid (min-width: 62rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.bpn-grid[data-columns="4"] {
  @container bpn-grid (min-width: 62rem) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.bpn-flex[data-mobile="stack"] {
  @container bpn-flex (max-width: 61.9375rem) {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}
.bpn-flex[data-mobile="stack"] .bpn-flex__item {
  @container bpn-flex (max-width: 61.9375rem) {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
  }
}
@media (max-width: 991px) {
  .bpn-grid[data-columns="2"],
  .bpn-grid[data-columns="3"],
  .bpn-grid[data-columns="4"] {
    grid-template-columns: 1fr !important;
  }
  .bpn-flex[data-mobile="stack"] {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  .bpn-flex[data-mobile="stack"] .bpn-flex__item {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}
@media (min-width: 992px) {
  .bpn-grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bpn-grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bpn-grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bpn-grid[data-columns="2"][data-column-ratio="one-third"] { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
  .bpn-grid[data-columns="2"][data-column-ratio="three-one"] { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
  .bpn-grid[data-columns="2"][data-column-ratio="small-large"] { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .bpn-grid[data-columns="2"][data-column-ratio="large-small"] { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
/* bpn-layout: column ratios */
.bpn-grid[data-columns="2"][data-column-ratio="one-third"] {
  @container bpn-grid (min-width: 62rem) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  }
}
.bpn-grid[data-columns="2"][data-column-ratio="three-one"] {
  @container bpn-grid (min-width: 62rem) {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  }
}
.bpn-grid[data-columns="2"][data-column-ratio="small-large"] {
  @container bpn-grid (min-width: 62rem) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}
.bpn-grid[data-columns="2"][data-column-ratio="large-small"] {
  @container bpn-grid (min-width: 62rem) {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}
.bpn-grid[data-columns="3"] .bpn-grid__cell:nth-child(4) {
  display: none;
}
.bpn-flex[data-items="3"] .bpn-flex__item:nth-child(4) {
  display: none;
}