/* custom html elements */
/* ==== containers ==== */
hb-cntr {
  container-type: inline-size;
  width: 100%; /* unsure if this is smart, but containers are default 0 width */
}

/* ==== rows ==== */
/* i would have loved to use container queries for the row cells, */
/* but you can't do container query on the container itself, and the row also need styling after cell size */
hb-line {
  margin-block: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center; /* when do we want center? if image and text besides eachother, in buttons */
}

hb-line:first-child, :not(hb-line) + hb-line {
  margin-block-start: 0;
}

hb-line:last-child {
  margin-block-end: 0;
}

hb-line > * {
  flex: 1 1 20em; /* boxes go to vertical stack at 770px window width */
}

/* ==== boxes ==== */
hb-box {
  display: block;
  margin-block: 16px;
  border-radius: var(--radius-std);
}

hb-line > hb-box {
  margin: 0;
}

hb-box:is(.warning, .info) {
  padding: 16px;
}

html.js hb-box:is(.warning, .info) {
  padding-inline-start: calc(32px + var(--icon-size));
  position: relative;
}

hb-box:is(.warning, .info) > :nth-child(2) {
  flex: 1;
}

hb-box.warning {
  background: var(--yellow-93);
  border: var(--border) var(--yellow-65);
}

hb-box.info {
  background: var(--blue-93);
  border: var(--border) var(--blue-65);
}

html.js hb-box:is(.warning, .info) > .icon {
  position: absolute;
  inset: 16px;
}

hb-box h2 {
  font-size: inherit;
}

hb-box .media {
  display: block;
  aspect-ratio: 4/3;
}

/*# sourceMappingURL=4-layout.css.map */