:root {
  --logo-gray: #767676;
  --marquee-height: 124px;
  --logo-height: 72px;
  --logo-gap: 72px;
  --edge-fade: 52px;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: transparent;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.preview-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: transparent;
}

.logo-marquee {
  width: 100%;
  height: var(--marquee-height);
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 var(--edge-fade),
    #000 calc(100% - var(--edge-fade)),
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 var(--edge-fade),
    #000 calc(100% - var(--edge-fade)),
    transparent
  );
}

.logo-marquee__track {
  display: flex;
  width: max-content;
  animation: logo-scroll var(--duration, 52s) linear infinite;
  will-change: transform;
}

.logo-marquee__group {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  padding-right: var(--logo-gap);
  flex: 0 0 auto;
}

.logo-marquee img {
  display: block;
  height: var(--logo-height);
  max-width: min(280px, 38vw);
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}

.logo-marquee img[src*="charlottesville"],
.logo-marquee img[src*="state-department"] {
  max-width: 104px;
}

.logo-marquee img[src*="global-ties"],
.logo-marquee img[src*="colonial-williamsburg"],
.logo-marquee img[src*="inverse-logo-silhouette"] {
  max-width: min(340px, 48vw);
}

.logo-marquee img[src*="morven"] {
  max-width: 210px;
}

.logo-marquee img[src*="monticello"] {
  max-width: min(340px, 52vw);
}

@keyframes logo-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 640px) {
  :root {
    --marquee-height: 104px;
    --logo-height: 56px;
    --logo-gap: 44px;
    --edge-fade: 28px;
  }

  .logo-marquee img {
    max-width: 220px;
  }

  .logo-marquee img[src*="charlottesville"],
  .logo-marquee img[src*="state-department"] {
    max-width: 84px;
  }

  .logo-marquee img[src*="monticello"] {
    max-width: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track {
    animation-duration: 120s;
  }
}