.bg-blue-purple-indigo {
  background-image: radial-gradient(
    circle,
    hsl(285deg 58% 27%) 0%,
    hsl(282deg 60% 25%) 14%,
    hsl(280deg 62% 24%) 24%,
    hsl(277deg 64% 22%) 33%,
    hsl(275deg 67% 20%) 42%,
    hsl(272deg 69% 19%) 50%,
    hsl(269deg 71% 17%) 57%,
    hsl(267deg 74% 16%) 64%,
    hsl(264deg 76% 14%) 71%,
    hsl(261deg 79% 13%) 78%,
    hsl(259deg 81% 12%) 85%,
    hsl(256deg 84% 10%) 92%,
    hsl(253deg 87% 9%) 100%
  );
}

.boxes {
  --border: 1px dashed rgba(255 255 255 / 50%);
  --entry-exit-width: 150px;
  }

.boxes-header::before {
  content: "";
  display: block;
  height: 1px;
  width: calc(var(--entry-exit-width) - 1rem);
  position: absolute;
  border-bottom: var(--border);
  left: calc((var(--entry-exit-width) - (var(--entry-exit-width)*2)));
  top: 2rem;
  }
  

.box-first::before,
.box-last::after {
  content: "";
  display: block;
  height: 1000px;
  width: var(--entry-exit-width);
  position: absolute;
  border-radius: var(--bs-border-radius);
  }

  .box-first::before {
    left: calc((var(--entry-exit-width) - (var(--entry-exit-width)*2)) + (var(--bs-gutter-x) / 2));
    top: calc(-1000px + 50%);
    border-left: var(--border);
    border-bottom: var(--border);
    }

  .box-last::after {
    right: calc((var(--entry-exit-width) - (var(--entry-exit-width)*2)) + (var(--bs-gutter-x) / 2));
    bottom: calc(-1000px + 50%);
    border-right: var(--border);
    border-top: var(--border);
    }

.box-outer {
  border: var(--border);
  }

  .box-outer::after {
    background: transparent;
    content: "";
    display: none;
    height: 1px;
    width: var(--bs-gutter-y);
    position: absolute;
    right: calc(var(--bs-gutter-y) - (var(--bs-gutter-y)*2));
    top: 50%;
    border-bottom: var(--border);
    }

    @media (min-width: 768px) and (max-width: 991px) {
      {# only show the line on every other box, starting with #1 #}
      .box:nth-child(odd) .box-outer::after { display: block; }
      }

    @media (min-width: 992px) {
      {# only show lines on every first and second box #}
      .box:nth-child(3n+1) .box-outer::after,
      .box:nth-child(3n+2) .box-outer::after { display: block; }
      }
    
  .box-outer::before {
    background: transparent;
    content: "";
    display: none;
    width: 1px;
    height: var(--bs-gutter-x);
    position: absolute;
    top: calc(var(--bs-gutter-x) - (var(--bs-gutter-x)*2));
    left: 50%;
    border-right: 1px dashed rgba(255 255 255 / 50%);
    }

    @media (min-width: 768px) and (max-width: 991px) {
      {# only show lines from box #3 onward #}
      .box:nth-child(n+3) .box-outer::before { display: block; }
      }

    @media (min-width: 992px) {
      {# only show lines from box #4 onward #}
      .box:nth-child(n+4) .box-outer::before { display: block; }
      }