*, *::before, *::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: "Montserrat", var(--font-main);
  background: #101820;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-top: calc(var(--header-topbar-height) + var(--header-nav-height));
}
img {
  max-width: 100%;
  display: block;
}

.demo-content {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 60px 24px 120px;
}
.demo-content h1 {
  font-size: clamp(24px, 4vw, 36px);
  margin: 0 0 12px;
}
.demo-content p {
  color: var(--color-text-muted);
  max-width: 640px;
  line-height: 1.6;
  margin: 0 0 40px;
}
.demo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.demo-gallery figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #1b212c;
  aspect-ratio: 4 / 3;
}
.lazy {
    opacity: 0;
    transform: scale(1.1);

    transition:
        opacity .9s cubic-bezier(.22,1,.36,1),
        transform 1.3s cubic-bezier(.22,1,.36,1);

    will-change: opacity, transform;
}

.lazy.is-loaded {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 640px){
  body{
    padding-top: 0;
  }
}