svg {
  overflow: visible;

  line[stroke-dasharray] {
    stroke: var(--ruby);
    stroke-opacity: .7;
  }

  &.diam,
  &.line,
  &.lines,
  &.dia-lines,
  &.sqr-lines {
    position: absolute;
    color: var(--shale);
  }
  &.lines {
    display: none;
  }

  &.line {
    display: none;
  }
  &.dia-lines,
  &.sqr-lines {
    width: var(--line-group-width);
    top: -1rem;
  }
  &.dia-lines {
    top: -1rem;
  }
}
.dark svg {
  line[stroke-dasharray] {
    stroke-opacity: .5;
  }

  &.diam,
  &.line,
  &.lines,
  &.dia-lines,
  &.sqr-lines {
    color: var(--basalt);
  }
}
.the-way svg {
  &.sqr-lines {
    top: -1rem;
  }
}

article {
  header {
    svg {
      &:nth-child(1 of .diam) {
        width: 2rem;
        bottom: 18rem;
        left: 84vw;
      }

      &:nth-child(2 of .diam) {
        width: 1.5rem;
        bottom: 1rem;
        left: 16vw;
      }
    }
  }

  section {
    svg {
      &:nth-child(1 of .diam) {
        width: 2rem;
        bottom: 17rem;
        left: 80vw;
      }
    }

    &:nth-of-type(3) {
      svg {

        &:nth-child(1 of .diam) {
          width: 3rem;
          bottom: 1rem;
          left: 85vw;
        }

        &:nth-child(2 of .diam) {
          width: 2rem;
          bottom: 2.4rem;
          left: 76vw;
        }
      }
    }

    &:nth-of-type(4) {
      svg {
        &:nth-child(1 of .diam) {
          width: 3rem;
          bottom: 14rem;
          left: 70vw;
        }

        &:nth-child(2 of .diam) {
          width: 2rem;
          bottom: 12.4rem;
          left: 85vw;
        }
      }
    }
  }
}
#beyond {
  width: 60%;
  translate: 0 40%;
}

@container flex-swap (min-width: 801px) {
  svg {
    &.dia-lines,
    &.sqr-lines {
      width: min(45vw, calc(var(--max-page-width) * .45));
    }
    &.dia-lines {
      top: -5rem;
    }

    &.line {
      display: block;
      width: 40vw;
      top: -1rem;
    }
    &.lines {
      display: block;
      width: 22rem;
      left: 4rem;
      top: 4rem;
    }
  }
  .the-way svg {
    &.sqr-lines {
      top: -6rem;
    }
  }

  article {
    header {
      svg.dia-lines,
      svg.sqr-lines {
        top: -5.4rem;
      }
      svg {
        &:nth-child(1 of .diam) {
          bottom: 10rem;
        }
      }
    }

    section {
      &:first-of-type svg {
        &.diam {
          bottom: 2rem;
          left: 90vw;
        }
      }

      &:nth-of-type(3) svg {
        &.diam:first-of-type {
          bottom: 16rem;
          left: 45vw;
        }
      }

      &:nth-of-type(4) {
        svg {
          &:nth-child(1 of .diam) {
            bottom: 3rem;
            left: 54vw;
          }

          &:nth-child(2 of .diam) {
            bottom: 2rem;
            left: 48vw;
          }
        }
      }
    }
  }
}