.dl-web {
  box-sizing: border-box;
  width: min(100%, var(--dl-container-max));
  margin-inline: auto;
  padding-inline: var(--dl-gutter-mobile);
  color: var(--dl-color-black);
  background: var(--dl-color-white);
  font-family: var(--dl-font-family);
  font-size: var(--dl-body-mobile);
  line-height: var(--dl-body-line-height);
  overflow-wrap: anywhere;
}
.dl-web *, .dl-web *::before, .dl-web *::after { box-sizing: border-box; }
.dl-web h1 { font-size: var(--dl-h1-mobile); font-weight: var(--dl-h1-weight); line-height: var(--dl-h1-line-height); }
.dl-web h2 { font-size: var(--dl-h2-mobile); font-weight: var(--dl-h2-weight); line-height: var(--dl-h2-line-height); }
.dl-web h3 { font-size: var(--dl-h3-mobile); font-weight: var(--dl-h3-weight); line-height: var(--dl-h3-line-height); }
.dl-web p { max-width: var(--dl-prose-max); }
.dl-web a { color: var(--dl-color-blue); text-decoration: underline; }
.dl-web a:hover { color: var(--dl-color-blue-hover); }
.dl-web :focus-visible { outline: var(--dl-focus-outline) solid var(--dl-color-blue); outline-offset: var(--dl-focus-offset); }
@media (min-width: 768px) {
  .dl-web { padding-inline: var(--dl-gutter-desktop); font-size: var(--dl-body-desktop); }
  .dl-web h1 { font-size: var(--dl-h1-desktop); }
  .dl-web h2 { font-size: var(--dl-h2-desktop); }
  .dl-web h3 { font-size: var(--dl-h3-desktop); }
}
@media (prefers-reduced-motion: reduce) { .dl-web * { scroll-behavior: auto; transition: none; } }