.l-region:has(.list-pillar) {
  --region-vertical-bottom-padding: 0;
  --region-vertical-top-padding: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.list-pillar {
  --list-pillar-easing: cubic-bezier(0.35, 0.495, 0.445, 1.005);
  display: grid;
}

/* Custom variation: no title */
.list-pillar.no-title {
  --list-pillar-title: none;
  --list-pillar-padding-top: 24vmin;
  --list-pillar-keyline-height: 100%;  
}

.list-pillar::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #030303;
  opacity: 0.25;
  pointer-events: none;
}

@media (max-width: 63.9375em) {
  .list-pillar::after {
    opacity: 0.4;
    width: calc(100% - 20vw);
  }
}

.list-pillar-header {
  display: var(--list-pillar-title, block);
  padding-top: 12vmin;
}

.list-pillar-header,
.list-pillar-container {
  grid-column: 1;
  grid-row: 1;
}

.list-pillar-container {
  margin-top: 0;
  display: flex;
}

@media (max-width: 63.9375em) {
  .list-pillar-container {
    margin: 0 calc(var(--gutter) * -1);
    display: flex;
    justify-content: flex-start;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
  }
}

.list-pillar-item {
    flex: 1 0 0;
    margin-top: 0;
    cursor: pointer;
    padding: calc(var(--heading-h2-size) + 120px) min(max(1.25rem, calc(1.25rem + ((1vw - 14.4px) * 4.1667))), 2.5rem) var(--gutter);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: var(--cst-reg-commitment-mask, transparent);
    transition: background-color 0.75s var(--list-pillar-easing);
    min-height: min(50rem, 70dvh);
}

@media (max-width: 63.9375em) {
  .list-pillar-item {
    flex-basis: 80vw;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    transition: opacity 0.25s var(--list-pillar-easing);
  }

  .list-pillar-item:last-child {
    padding-right: calc(20vw + var(--gutter));
    flex-basis: 100%;
  }

  .list-pillar-item.js-mobile-hidden {
    opacity: 0.5;
  }
}

@media (min-width: 64em) {
  .list-pillar-item:last-child::after,
  .list-pillar-item::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: var(
      --list-pillar-keyline-height,
      calc(100% - (12vmin + var(--heading-h2-size) + 120px))
    );
    background-color: currentColor;
  }

  .list-pillar-item:last-child::after {
    left: auto;
    right: 0;
  }

  .list-pillar-item:hover,
  .list-pillar-item:focus-within {
    --cst-reg-commitment-mh: 0;
    --cst-reg-commitment-alpha: 1;
    --cst-reg-commitment-title: 0;
    --cst-reg-commitment-mask: rgba(3, 3, 3, 0.3);
  }

  .list-pillar-item-collapse {
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-top: 0;
  }

  .list-pillar-item-collapse > div {
    transform: translateY(var(--cst-reg-commitment-mh, 100%));
    transition: all 0.55s var(--list-pillar-easing);
  }

  .list-pillar-item-title {
    transition: transform 0.55s var(--list-pillar-easing);
    transform: translateY(var(--cst-reg-commitment-title, -100%));
  }

  .list-pillar-item-title + div {
    transition: opacity 1s 0.1s var(--list-pillar-easing);
    opacity: var(--cst-reg-commitment-alpha, 0);
  }
}

.list-pillar-background {
  margin-top: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.75s var(--list-pillar-easing);
  background-color: var(--region-background);
}

@media (max-width: 63.9375em) {
  .list-pillar-header {
    align-self: start;
    position: relative;
    z-index: 1;
  }
}