@layer components {
  .divider {
    --divider-line: rgba(241, 234, 216, 0.42);
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: clamp(34px, 2.6vw, 42px);
    padding-inline: clamp(12px, 3vw, 40px);
    background: linear-gradient(
      180deg,
      #0d101e,
      var(--c-green-night) 50%,
      #0d101e
    );
    border-block: 1px solid rgba(241, 234, 216, 0.06);
  }
  .divider:before,
  .divider:after {
    content: "";
    height: 1px;
    min-width: 18px;
    transition: transform 1.1s var(--ease-out) 0.15s;
  }
  .divider:before {
    background: linear-gradient(90deg, transparent, var(--divider-line) 30%);
    transform-origin: right;
  }
  .divider:after {
    background: linear-gradient(90deg, var(--divider-line) 70%, transparent);
    transform-origin: left;
  }
  .divider__label {
    margin-inline: clamp(10px, 1.6vw, 18px);
    padding: 0.5em 1.3em 0.45em 1.54em;
    border: 1px solid var(--divider-line);
    font-family: var(--ff-small);
    font-size: clamp(10px, 0.8vw, 11.5px);
    line-height: 1.2;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--c-cream-warm);
  }
  @media (prefers-reduced-motion: no-preference) {
    html.reveal-ready .divider[data-reveal]:not(.is-inview):before,
    html.reveal-ready .divider[data-reveal]:not(.is-inview):after {
      transform: scaleX(0);
    }
  }
}