/* Loading screen: only shown when JS runs (html.js), hidden again by assets/js/loader.js.
   TODO: modules are deferred, so the page may paint briefly before the loader appears.
   Same column grid as the page (main padding + project-list gap), so the
   image lines up with the content: the middle 2 of 4 columns on mobile,
   the middle 2 of 12 on desktop. */
.loader {
  display: none;
}

.js .loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--spacing-4);
  align-items: center;
  padding-inline: var(--spacing-3);
  background: #fff;

  &.is-done {
    display: none;
  }
}

.loader-image {
  grid-row: 1;
  grid-column: 2 / span 2;
  opacity: 0;

  &.is-active {
    opacity: 1;
  }

  img {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .js .loader {
    grid-template-columns: repeat(12, 1fr);
    padding-inline: var(--spacing-5);
  }

  .loader-image {
    grid-column: 6 / span 2;
  }
}