/* ========== CONFIG GLOBAL ========== */
.border-img {
  position: relative;
  /* Tokens */
  --b-thick: 2px;
  --b-color: var(--c-blanco);
  --gap-color: var(--c-negro);
  /* Offsets (desktop por defecto) */
  --b-x: 40px;
  /* desplazamiento horizontal del borde */
  --b-y: 40px;
  /* desplazamiento vertical del borde */
  --gap-l: 200px;
  /* longitud de la “grieta” */
  --gap-t: 2px;
  /* grosor de la “grieta” */
}

/* Variante de color de borde */
.border-img.b-black {
  --b-color: var(--c-negro);
}

/* Pseudoelementos base */
.border-img::before,
.border-img::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

/* ========== BORDE DESPLAZADO ========== */
.border-img::before {
  width: 100%;
  height: 100%;
  border: var(--b-thick) solid var(--b-color);
}

/* Posiciones del borde (usa las variables, así responden a media queries) */
.b-rightDown::before {
  top: var(--b-y);
  left: var(--b-x);
}

.b-rightUp::before {
  top: calc(-1 * var(--b-y));
  right: var(--b-x);
}

.b-leftUp::before {
  top: calc(-1 * var(--b-y));
  right: calc(-1 * var(--b-x));
}

.b-leftDown::before {
  top: var(--b-y);
  left: calc(-1 * var(--b-x));
}

/* ========== GAPS (Grietas) ========== */
/* Utilidades por orientación (ancho/alto y color) */
.gap-h::after {
  width: var(--gap-l);
  height: var(--gap-t);
  background: var(--gap-color);
}

.gap-v::after {
  width: var(--gap-t);
  height: var(--gap-l);
  background: var(--gap-color);
}

/* Ubicaciones frecuentes (coordenadas) */
.gap-upLeft::after {
  top: calc(-1 * var(--b-y));
  left: 0;
}

.gap-upRight::after {
  top: calc(-1 * var(--b-y));
  right: 0;
}

.gap-downLeft::after {
  bottom: calc(-1 * var(--b-y));
  left: 90px;
}

.gap-downRight::after {
  bottom: calc(-1 * var(--b-y));
  right: 40px;
}

.gap-leftUp::after {
  top: calc(2 * var(--b-y));
  left: calc(-1 * var(--b-x));
  background: var(--c-blanco);
}

.gap-leftDown::after {
  bottom: var(--b-y);
  left: calc(-1 * var(--b-x));
}

.gap-rightUp::after {
  top: calc(2 * var(--b-y));
  right: var(--b-x);
}

.gap-rightDown::after {
  bottom: var(--b-y);
  right: calc(-1 * var(--b-x));
}

/* ========== BREAKPOINTS ========== */
/* <=1300px: actualiza solo variables; las clases se adaptan solas */
@media (max-width: 1300px) {
  .border-img {
    --b-x: 18px;
    --b-y: 30px;
    --gap-l: 100px;
    /* antes acortabas algunas horizontales: lo generalizamos */
  }

  /* Excepciones que cambiaban a 0 en tu código original */
  .gap-leftDown::after {
    bottom: 0;
  }

  /* antes: 0 en 1300 */
}

/* <=600px: solo ajuste vertical (tu CSS movía ±30px) */
@media (max-width: 600px) {
  .border-img {
    --b-y: 30px;
  }
}