.example-gallery,
.free-asset-feature {
  margin: 84px 0 0;
  padding: 48px 0 0;
  border-top: 1px solid #bac7dd;
  color: #182031;
}
.example-gallery h2,
.free-asset-feature h2 {
  margin: 0 0 38px;
  font: 750 clamp(28px, 4vw, 42px)/1.12 Arial, sans-serif;
  letter-spacing: -.04em;
}
.free-asset-rabbits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.free-asset-rabbits a { display: grid; justify-items: center; gap: 12px; padding: 16px 12px 20px; border: 1px solid #18203124; border-radius: 8px; background: #fffdf8; color: #182031; text-decoration: none; box-shadow: 3px 3px 0 #1820310b; font: 600 16px/1.4 Arial, sans-serif; }
.free-asset-rabbits picture { display: grid; place-items: center; width: 100%; aspect-ratio: 1; }
.free-asset-rabbits img { display: block; width: 256px; height: auto; max-width: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.free-asset-rabbits a:hover { border-color: #3568ff; }
.free-asset-rabbits a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.free-asset-rabbits a:focus-visible { outline: 3px solid #3568ff; outline-offset: 4px; }
.example-gallery h3 {
  margin: 0;
  font: 600 16px/1.4 Arial, sans-serif;
  letter-spacing: 0;
}
.example-gallery figure { margin: 0; }
.example-featured { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 800px; margin: 0 auto 58px; }
.example-featured .example-open { display: grid; place-items: center; aspect-ratio: 1; background: #faf9f5; }
.example-featured .example-open img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.example-featured figure:first-child img { width: 320px; }
.example-featured figure:last-child img { width: 288px; }
.example-gallery img { display: block; max-width: 100%; }
.pixel-example { image-rendering: pixelated; image-rendering: crisp-edges; }
.example-comparisons {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  align-items: start;
  gap: 28px;
  max-width: 880px;
  margin: 0 auto 58px;
}
.comparison-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #183747;
  border: 1px solid #182031;
  border-radius: 6px;
  box-shadow: 4px 4px 0 #18203114;
  --split: 50%;
}
.comparison-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.comparison-frame .comparison-before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}
.comparison-label {
  position: absolute;
  top: 14px;
  padding: 6px 9px;
  background: #fffdf8;
  color: #182031;
  font: 600 13px/1.2 Arial, sans-serif;
  pointer-events: none;
  box-shadow: 2px 2px 0 #18203130;
}
.comparison-label.is-before { left: 14px; }
.comparison-label.is-after { right: 14px; }
.comparison-divider {
  position: absolute;
  inset: 0 auto 0 var(--split);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px #18203155;
  transform: translateX(-50%);
  pointer-events: none;
}
.comparison-divider::after {
  content: '↔';
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border: 2px solid #182031;
  border-radius: 50%;
  background: #fffdf8;
  color: #182031;
  font: 700 24px/1 Arial, sans-serif;
}
.example-gallery .comparison-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}
.comparison-frame:focus-within { outline: 3px solid #3568ff; outline-offset: 4px; }
.comparison-caption {
  padding: 14px 0 0;
  text-align: center;
}
.comparison-caption span { color: #53637a; font-size: 13px; }
.example-grid { columns: 3; column-gap: 20px; }
.example-grid figure { break-inside: avoid; margin-bottom: 20px; }
.example-open {
  display: block;
  padding: 0;
  width: 100%;
  border: 1px solid #18203124;
  border-radius: 6px;
  overflow: hidden;
  background: #fffdf8;
  cursor: zoom-in;
  box-shadow: 3px 3px 0 #1820310b;
}
.example-open img { width: 100%; height: auto; }
.example-open:focus-visible { outline: 3px solid #3568ff; outline-offset: 4px; }
.example-open:hover { border-color: #3568ff; }
.example-motion { margin-top: 52px; padding-bottom: 36px; }
.example-motion-head { display: grid; justify-items: center; gap: 18px; margin-bottom: 36px; }
.example-motion-head h3 {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
  width: 100%;
  font: 750 clamp(28px, 4vw, 42px)/1.2 Arial, sans-serif;
  letter-spacing: -.03em;
  text-align: center;
  white-space: nowrap;
}
.example-motion-head h3::before,
.example-motion-head h3::after { content: ''; flex: 1; height: 1px; background: #bac7dd; }
.example-motion-toggle { padding: 10px 14px; border: 1px solid #bac7dd; border-radius: 6px; background: #fffdf8; color: #182031; font: 600 14px/1.4 Arial, sans-serif; cursor: pointer; }
.example-motion-toggle:focus-visible { outline: 3px solid #3568ff; outline-offset: 3px; }
.example-videos {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
/* Twice the previous desktop widths, capped by the available mobile space. */
.example-videos figure { min-width: 0; width: min(100%, 940px); }
.example-videos .video-traveler { width: min(100%, 570px); }
.example-videos .video-lagoon { width: min(100%, 770px); }
.example-videos video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #18203130;
  border-radius: 6px;
  background: #182031;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.example-lightbox {
  width: min(1100px, 94vw);
  max-width: 94vw;
  max-height: 94dvh;
  padding: 16px;
  border: 1px solid #bac7dd;
  border-radius: 8px;
  background: #fffdf8;
  color: #182031;
  overscroll-behavior: contain;
}
.example-lightbox::backdrop { background: #0d152be8; }
.example-lightbox-head { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.example-lightbox-close { border: 1px solid #bac7dd; border-radius: 4px; padding: 9px 14px; color: #182031; background: #e8eeff; cursor: pointer; font: 600 14px/1.2 Arial, sans-serif; }
.example-lightbox-close:focus-visible { outline: 3px solid #3568ff; outline-offset: 3px; }
.example-lightbox .example-lightbox-image { display: block; width: 100%; height: auto; max-height: 78dvh; object-fit: contain; margin: 0 auto; }
@media (max-width: 760px) {
  .example-gallery, .free-asset-feature { margin-top: 54px; padding-top: 32px; }
  .example-gallery h2, .free-asset-feature h2 { margin-bottom: 26px; }
  .free-asset-rabbits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .example-comparisons { gap: 18px; }
  .example-featured { gap: 18px; }
  .comparison-label { top: 8px; font-size: 12px; padding: 5px 6px; }
  .comparison-label.is-before { left: 8px; }
  .comparison-label.is-after { right: 8px; }
  .example-grid { columns: 2; column-gap: 14px; }
  .example-grid figure { margin-bottom: 14px; }
  .example-videos { gap: 28px; }
}
@media (max-width: 480px) {
  .example-comparisons { grid-template-columns: 1fr; gap: 30px; max-width: 320px; }
  .comparison-faces { width: 82%; margin-inline: auto !important; }
  .example-lightbox { padding: 12px; }
}