$separator-color: rgba(0, 0, 0, 0.2);

.envira-gallery-wrap.envira-layout-vertical-line-grid {
  position: relative;
  --envira-columns: var(--envira-columns, 3);
  
  /* Create vertical lines dynamically based on column count */
  background-image: 
    /* Horizontal line at top */
    linear-gradient(
      to bottom,
      $separator-color 0,
      $separator-color 1px,
      transparent 1px
    ),
    /* Vertical lines */
    linear-gradient(
      to right,
      transparent 0,
      transparent calc((100% / var(--envira-columns)) - 0.5px),
      $separator-color calc((100% / var(--envira-columns)) - 0.5px),
      $separator-color calc((100% / var(--envira-columns)) + 0.5px),
      transparent calc((100% / var(--envira-columns)) + 0.5px)
    ),
    linear-gradient(
      to right,
      transparent 0,
      transparent calc((200% / var(--envira-columns)) - 0.5px),
      $separator-color calc((200% / var(--envira-columns)) - 0.5px),
      $separator-color calc((200% / var(--envira-columns)) + 0.5px),
      transparent calc((200% / var(--envira-columns)) + 0.5px)
    ),
    linear-gradient(
      to right,
      transparent 0,
      transparent calc((300% / var(--envira-columns)) - 0.5px),
      $separator-color calc((300% / var(--envira-columns)) - 0.5px),
      $separator-color calc((300% / var(--envira-columns)) + 0.5px),
      transparent calc((300% / var(--envira-columns)) + 0.5px)
    ),
    linear-gradient(
      to right,
      transparent 0,
      transparent calc((400% / var(--envira-columns)) - 0.5px),
      $separator-color calc((400% / var(--envira-columns)) - 0.5px),
      $separator-color calc((400% / var(--envira-columns)) + 0.5px),
      transparent calc((400% / var(--envira-columns)) + 0.5px)
    ),
    linear-gradient(
      to right,
      transparent 0,
      transparent calc((500% / var(--envira-columns)) - 0.5px),
      $separator-color calc((500% / var(--envira-columns)) - 0.5px),
      $separator-color calc((500% / var(--envira-columns)) + 0.5px),
      transparent calc((500% / var(--envira-columns)) + 0.5px)
    );
  
  background-size: 100% 100%;
  /* Hide only the rightmost outside line without affecting internal ones */
  padding-right: 1px;
  background-clip: content-box;
}

.envira-gallery-wrap.envira-layout-vertical-line-grid .envira-gallery-public {
  padding-top: 20px; /* Default space for horizontal line when no description */
}

/* When description is shown above, remove padding from public since description handles it */
.envira-gallery-wrap.envira-layout-vertical-line-grid .envira-gallery-description-above + .envira-gallery-public {
  padding-top: 0; /* No additional space when description exists above */
}

.envira-gallery-wrap.envira-layout-vertical-line-grid .envira-gallery-description-above {
  padding-top: 20px;
}

@media only screen and (min-width: 320px) and (max-width: 459px) {
  .envira-gallery-wrap.envira-layout-vertical-line-grid {
    background-image: none !important; /* disable repeating lines */
    padding-right: 0 !important;       /* no need to clip right edge here */

    &::before {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      left: 50%;
      transform: translateX(-0.5px);
      width: 1px;
      background: $separator-color;
      pointer-events: none;
    }
    
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0; right: 0;
      height: 1px;
      background: $separator-color;
      pointer-events: none;
    }
  }
}

/* remove vertical line entirely */
@media only screen and (max-width: 320px) {
  .envira-gallery-wrap.envira-layout-vertical-line-grid {
    background-image: none !important;
    padding-right: 0 !important;

    &::before { display: none !important; }
  }
}