@layer layout {
  .layout__columns-wrapper {
    --gap: 0;
    --gap-mobile: 0;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /**
   * Vertical divider between items in a multi-column layout.
   *
   * Implemented using a pseudo-element on each item except the first, positioned at the left edge of the item and
   * translated left by half the gap size (minus half the line width) so the centre of the line lands in the middle
   * of the gap. The line is hidden on mobile, and switches to a horizontal divider with appropriate translation.
   */
  .v-divider > * {
    position: relative;
  }

  /* Position at the right edge of the item, then slide right by (gap/2 - half-line-width)
    so the centre of the 1.5 px line lands exactly in the middle of the gap. */
  .v-divider > *:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
  }

  .layout__columns.v-divider > *:not(:first-child)::before {
    transform: translateY(calc(var(--gap-mobile, 0) * -1 / 2 - 0.75px));
  }

  .v-divider.v-divider--blue-bright > *:not(:first-child)::before {
    background-color: var(--color-blue-bright);
  }

  .v-divider.v-divider--pink > *:not(:first-child)::before {
    background-color: var(--color-pink);
  }

  .v-divider.v-divider--blue-dark > *:not(:first-child)::before {
    background-color: var(--color-blue-dark);
  }

  /* Switch from mobile to desktop background image at the configured breakpoint. */

  /* Mobile image: applied on sections that have a background configured */
  .layout__columns-wrapper[class*="layout__columns-wrapper--bg-"] {
    background-image: var(--image-url-mobile);
  }

  /* sm (default) */
  @media (min-width: 600px) {
    .layout__columns-wrapper.layout__columns-wrapper--bg-sm {
      background-image: var(--image-url);
    }
  }

  /* md */
  @media (max-width: 767px) {
    .layout__columns.v-divider--80-mobile > *:not(:first-child)::before {
      transform: translateY(calc(var(--gap-mobile, 0) * -1 / 2 - 0.75px)) translateX(-50%);
      width: 80%;
      left: 50%;
    }
    .layout__columns.v-divider--70-mobile > *:not(:first-child)::before {
      transform: translateY(calc(var(--gap-mobile, 0) * -1 / 2 - 0.75px)) translateX(-50%);
      width: 70%;
      left: 50%;
    }
    .layout__columns.v-divider--60-mobile > *:not(:first-child)::before {
      transform: translateY(calc(var(--gap-mobile, 0) * -1 / 2 - 0.75px)) translateX(-50%);
      width: 60%;
      left: 50%;
    }
    .layout__columns.v-divider--50-mobile > *:not(:first-child)::before {
      transform: translateY(calc(var(--gap-mobile, 0) * -1 / 2 - 0.75px)) translateX(-50%);
      width: 50%;
      left: 50%;
    }
  }

  @media (min-width: 768px) {
    .layout__columns-wrapper.layout__columns-wrapper--bg-md {
      background-image: var(--image-url);
    }
    .v-divider > *:not(:first-child)::before {
      /* Switch from vertical to horizontal divider, and adjust translation to be half the gap minus half the line width. */
      top: 0;
      left: 0;
      width: 1.5px;
      height: 100%;
    }
    .layout__columns.v-divider > *:not(:first-child)::before {
      transform: translateX(calc(var(--gap, 0) * -1 / 2 - 0.75px));
    }
  }

  /* lg */
  @media (min-width: 1024px) {
    .layout__columns-wrapper.layout__columns-wrapper--bg-lg {
      background-image: var(--image-url);
    }
  }
}