/** LINES **/

.vertical-line {
  position: fixed;
  top: 0;
  z-index: -1;
  border-right: 1px solid var(--c-red);
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  transform: translateX(0.5px);
  pointer-events: none;
}

/* Default: hide grid lines on small screens */
.line-left,
.line-right,
.home-line-left,
.home-line-right {
  display: none;
}

.line-center,
.home-line-center {
  width: 50%;
}

@media screen and (min-width: 720px) {

  .vertical-line {
    border-right: 2px solid var(--c-red);
    transform: translateX(1px);
  }

  .home-line-left {
    display: block;
    width: 33.3333333vw;
  }

  .home-line-center {
    width: 66.6666666vw;
  }

  .line-center,
  .home-line-center {
    z-index: 4;
  }
}

@media screen and (min-width: 1024px) {

  .line-left,
  .line-right {
    z-index: 2;
  }

  .line-center {
    z-index: 4;
  }

  .line-left,
  .home-line-left {
    display: block;
    width: 25vw;
  }

  .line-right,
  .home-line-right {
    display: block;
    width: 75vw;
  }

  .home-line-center {
    width: 50vw;
  }
}

/** BORDERS **/

/* ──────────────── BASE ──────────────── */

.border-top,
.border-bottom {
  position: relative;
  z-index: 1;
}

/* Always define pseudo-elements */
.border-top::before,
.border-bottom::after {
  content: '';
  position: absolute;
  background-color: var(--c-red);
  pointer-events: none;
  z-index: -1;
  display: block;
}

/* ──────────────── DEFAULT (1px) ──────────────── */

.border-top::before {
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-0.5px);
}

.border-bottom::after {
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(0.5px);
}

/* ──────────────── MD (≥720px, 2px) ──────────────── */

@media screen and (min-width: 720px) {

  .border-top::before {
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(-1px);
  }

  .border-bottom::after {
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    transform: translateY(1px);
  }
}