/* === Tilt Effects (schaalbaar met variabelen) === */

.tilt-left-bottom,
.tilt-right-bottom,
.tilt-right-top,
.tilt-left-top {
  position: relative;
}
.tilt-left-bottom > *,
.tilt-right-bottom > *,
.tilt-right-top > *,
.tilt-left-top > * {
  position: relative;
  z-index: 2;
}

/* Left Bottom */
.tilt-left-bottom::after {
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height: var(--tilt-height-desktop);
  background: var(--tilt-bg);
  clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
  z-index:1;
  pointer-events:none;
}
@media (max-width: 768px) {
  .tilt-left-bottom::after {
    height: var(--tilt-height-mobile);
  }
}

/* Right Bottom */
.tilt-right-bottom::after {
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-1px;
  height: var(--tilt-height-desktop);
  background: var(--tilt-bg);
  clip-path: polygon(0 100%, 100% 100%, 0 0, 0 100%);
  z-index:1;
  pointer-events:none;
}
@media (max-width: 768px) {
  .tilt-right-bottom::after {
    height: var(--tilt-height-mobile);
  }
}

/* Right Top */
.tilt-right-top::after {
  content:"";
  position:absolute;
  left:0; right:0;
  top:-1px;
  height: var(--tilt-height-desktop);
  background: var(--tilt-bg);
  clip-path: polygon(0 0, 100% 100%, 100% 0, 0 0);
  z-index:1;
  pointer-events:none;
}
@media (max-width: 768px) {
  .tilt-right-top::after {
    height: var(--tilt-height-mobile);
  }
}

/* Left Top */
.tilt-left-top::after {
  content:"";
  position:absolute;
  left:0; right:0;
  top:-1px;
  height: var(--tilt-height-desktop);
  background: var(--tilt-bg);
  clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
  z-index:1;
  pointer-events:none;
}
@media (max-width: 768px) {
  .tilt-left-top::after {
    height: var(--tilt-height-mobile);
  }
}