.decorated-zone {
  position: relative;
  inline-size: 100%;
  block-size: 100vh;
  padding: var(--padding-body, 10px);
}

.decorated-zone::before,
.decorated-zone::after {
  position: absolute;
  content: '';
  display: block;
  inline-size: 25px;
  aspect-ratio: 1 / 1;
  --border: 1px solid var(--color-button);
}

.decorated-zone::before {
  top: var(--padding-body, 10px);
  right: var(--padding-body, 10px);
  border-block-start: var(--border);
  border-inline-end: var(--border);
}

.decorated-zone::after {
  bottom: var(--padding-body, 10px);
  left: var(--padding-body, 10px);
  border-inline-start: var(--border);
  border-block-end: var(--border);
}

.decorated-text {
  --decorated-text-font-size: var(--font-size-header-title, clamp(7.25rem, 7.0115rem + 1.0178vw, 7.5rem));
  --decorated-text-font-weigth: bold;
  --decorated-text-line-height: var(--line-height-header-title, 0.825);
  --decorated-text-color: var(--color-title, #df00ff);
  --decorated-text-shadow-position: var(--text-shadow-position, 4px 4px);

  font-size: var(--decorated-text-font-size);
  font-weight: var(--decorated-text-font-weigth);
  line-height: var(--decorated-text-line-height);
  color: var(--decorated-text-color);
  text-shadow: var(--decorated-text-shadow-position) 0 var(--background-color-accent, #ff0070);
}

.marker {
  font-size: inherit;
  color: var(--color-accent, #000028);
  background-color: var(--background-color-accent, #ff0070);
}