.layout {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: var(--layout-column-gap);
  padding-top: calc(var(--layout-padding-top) + var(--layout-padding-top-add));
  padding-bottom: calc(var(--layout-padding-bottom) + var(--layout-padding-bottom-add));
  padding-left: var(--layout-padding-sides);
  padding-right: var(--layout-padding-sides);
  box-sizing: border-box;
  border-top-left-radius: var(--regular-border-radius);
  border-top-right-radius: var(--regular-border-radius);
}
main .layout {
  background-color: var(--color-background);
}
main .layout.has-no-radius {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
main .layout:not(:first-child):not(:last-child):not(.sticky.full-height).next-has-radius {
  margin-bottom: calc(var(--regular-border-radius) * -1);
  padding-bottom: calc(var(--layout-padding-bottom) + var(--layout-padding-bottom-add) + var(--regular-border-radius));
}
.layout.sticky {
  position: sticky;
  top: 0;
  --layout-padding-bottom-add: var(--layout-sticky-padding-bottom-add);
}
.layout {
  --layout-padding-top-add: var(--layout-sticky-padding-top-add);
}
.layout:not(.sticky).has-subtitle, 
.layout:not(.sticky):first-child {
  --layout-sticky-subtitle-offset: -1rem;
  --layout-padding-top-add: 3.5rem;
}
.layout.sticky.has-subtitle {
  --layout-padding-top-add: calc(var(--layout-sticky-padding-top-add) + 1em + var(--layout-sticky-subtitle-offset));
}
.layout.full-height {
  height: 100dvh;
}

@media (max-width: 720px) {
  
  .layout.sticky,
  .layout {
    position: relative;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top: var(--layout-padding-top);
    padding-bottom: var(--layout-padding-bottom);
  }
  .layout.has-subtitle,
  .layout.is-first {
    --layout-padding-top-add: 2rem !important;
    padding-top: calc(var(--layout-padding-top) + var(--layout-padding-top-add));
  }
  .layout-background-video {
    z-index: 0 !important;
  }
  .layout > *:not(.layout-background-video) {
    z-index: 1;
  }
  .layout.full-height {
    height: auto;
  }
  main .layout:not(.is-first):not(:last-child):not(.sticky.full-height).next-has-radius {
    margin-bottom: 0;
    padding-bottom: var(--layout-padding-bottom);
  }
  
  .layout-subtitle {
    top: var(--layout-padding-top) !important;
  }
  .layout.empty, 
  .column.empty {
    display: none;
  }
  
}



.layout-background-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
main .layout:not(.has-no-radius) .layout-background-video {
  border-top-left-radius: var(--regular-border-radius);
  border-top-right-radius: var(--regular-border-radius);
}

.column {
  grid-column-end: span var(--span);
}


.block {
  background-color: var(--block-background-color);
  padding-left: calc(var(--indent-left, 0) / var(--col-span, 12) * 150%);
  padding-right: calc(var(--indent-right, 0) / var(--col-span, 12) * 150%);
}
.block + .block {
  margin-top: var(--block-gap);
}



/* RESPONSIVENESS */

@media (max-width: 1024px) {
  
  .layout {
    display: flex;
    flex-direction: var(--flex-direction, column);
  }
  
  .column + .column {
    margin-top: var(--column-margin-top);
  }
  
  .block {
    --indent-left: 0 !important;
    --indent-right: 0 !important;
  }
  
}




.layout-subtitle {
  position: absolute;
  top: calc(var(--header-height) - var(--layout-sticky-subtitle-offset));
  left: var(--site-padding-sides);
  font-family: "SpaceMono";
  font-size: var(--font-size-h5);
  letter-spacing: 1%;
  text-transform: uppercase;
  color: var(--color);
}
.layout.sticky.has-subtitle .layout-subtitle {
  top: calc(var(--header-height) + var(--layout-sticky-subtitle-offset));
}


.layout-leadingtitle {
  position: absolute;
  top: calc(var(--layout-leadingtitle-offset) * -1);
  left: var(--site-padding-sides);
  font-family: "SpaceMono";
  font-size: var(--font-size-h5);
  letter-spacing: 1%;
  text-transform: uppercase;
  color: var(--color-highlight);
  transform: rotate(-90deg);
  transform-origin: top left;
  display: flex;
  align-items: center;
  gap: .5em;
}
.layout-leadingtitle .arrow {
  margin-bottom: .1em;
}