.border-left-1,
.border-left-2,
.border-right-1,
.border-right-2 {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
}

.border-left-1,
.border-right-1 {
  background-color: var(--border-color);
  width: calc(var(--arrow-border-width) + var(--border-width));
}

.border-left-2,
.border-right-2 {
  background-color: var(--box-bg-color);
  width: var(--arrow-border-width);
}

.border-left-2 {
  left: 0;
  clip-path: polygon(0 0,
      var(--arrow-border-width) 0,
      var(--arrow-border-width) var(--arrow-start-position),
      1px var(--arrow-start-position),
      var(--arrow-border-width) calc(var(--arrow-start-position) + var(--arrow-border-width)),
      var(--arrow-border-width) 100%,
      0 100%);
}

.border-left-1 {
  left: 0;
  clip-path: polygon(0 0,
      calc(var(--arrow-border-width) + var(--border-width)) 0,
      calc(var(--arrow-border-width) + var(--border-width)) calc(var(--arrow-start-position) + var(--border-width)),
      calc(1px + var(--border-width) + 8px) calc(var(--arrow-start-position) + var(--border-width)),
      calc(var(--arrow-border-width) + var(--border-width)) calc(var(--arrow-start-position) + var(--arrow-border-width) - var(--border-width) + 3px),
      calc(var(--arrow-border-width) + var(--border-width)) 100%,
      0 100%);
}

.border-right-2 {
  right: 0;
  clip-path: polygon(0 0,
      var(--arrow-border-width) 0,
      var(--arrow-border-width) 100%,
      0 100%,
      0 calc(var(--arrow-start-position) + var(--arrow-border-width)),
      calc(var(--arrow-border-width) - 1px) var(--arrow-start-position),
      0 var(--arrow-start-position));
}

.border-right-1 {
  right: 0;
  clip-path: polygon(0 0,
      calc(var(--arrow-border-width) + var(--border-width)) 0,
      calc(var(--arrow-border-width) + var(--border-width)) 100%,
      0 100%,
      calc(0px - var(--border-width)) calc(var(--arrow-start-position) + var(--arrow-border-width) - var(--border-width) + 8px),
      calc(var(--arrow-border-width) - 9px) calc(var(--arrow-start-position) + var(--border-width)),
      calc(0px - var(--border-width)) calc(var(--arrow-start-position) + var(--border-width)));
}

.arrow .border-left-1,
.arrow .border-left-2,
.arrow .border-right-1,
.arrow .border-right-2 {
  display: block;
}

.kombiBox07 .item {
  align-self: auto;
  /* background-color: var(--border-color); */
}

.kombiBox07 .text {
  /* width: calc(50% - var(--arrow-border-width)); */
}

.kombiBox07x img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kombiBox07.arrow .caption {
  max-width: calc(100% - 2 * var(--border-width) - var(--arrow-border-width) - var(--border-width));
}

@media screen and (max-width: 700px) {

  .arrow .border-left-1,
  .arrow .border-left-2,
  .arrow .border-right-1,
  .arrow .border-right-2 {
    display: none;
  }
}