/* Page grid */

body::before {
  --grid-gutters: calc(
    var(--page-grid-gap) + var(--page-grid-gap) + var(--page-grid-gap) +
    var(--page-grid-gap) + var(--page-grid-gap) + var(--page-grid-gap) +
    var(--page-grid-gap) + var(--page-grid-gap) + var(--page-grid-gap) +
    var(--page-grid-gap) + var(--page-grid-gap)
  );
  --grid-column: calc((100% - var(--grid-gutters)) / 12);
  --grid-step: calc(var(--grid-column) + var(--page-grid-gap));
  --grid-skip-step: calc(var(--grid-step) + var(--grid-step));
  content: "";
  position: fixed;
  z-index: var(--z-background);
  top: var(--header-height);
  bottom: 0;
  left: max(var(--page-grid-margin), calc((100vw - var(--page-grid-max)) / 2 + var(--page-grid-margin)));
  right: max(var(--page-grid-margin), calc((100vw - var(--page-grid-max)) / 2 + var(--page-grid-margin)));
  pointer-events: none;
  background-image: linear-gradient(to right, var(--color-grid), var(--color-grid)),
    repeating-linear-gradient(
      to right,
      var(--color-grid) 0,
      var(--color-grid) 1px,
      transparent 1px,
      transparent var(--grid-skip-step)
    );
  background-position: right top, left top;
  background-repeat: no-repeat, repeat-x;
  background-size: 1px 100%, auto 100%;
  clip-path: polygon(0 0, 100% 0, 100% -48%, 0 -4%);
  animation: grid-lines-descend var(--duration-grid) var(--ease-grid) forwards;
  will-change: clip-path;
}

main,
.password-dialog {
  position: relative;
  z-index: var(--z-raised);
}

/* Containers */

.section-band {
  margin: 0 auto;
  max-width: var(--page-grid-max);
  padding: clamp(78px, 10vw, 150px) var(--page-grid-margin);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.56fr) minmax(0, 1.24fr);
  column-gap: clamp(24px, 5vw, 72px);
  row-gap: var(--space-heading-row-gap);
  margin-bottom: 34px;
}

@keyframes grid-lines-descend {
  from {
    clip-path: polygon(0 0, 100% 0, 100% -48%, 0 -4%);
  }

  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 148%);
  }
}

/* Shared responsive layout */

@media (max-width: 900px) {
  body::before {
    display: none;
  }

  .section-heading {
    grid-template-columns: 1fr;
  }
}