/* Spin Modern logo grid: calm gray logos in a grid that flips between logo sets tile by tile */
.sm-lg {
  --sm-lg-cols: 4;
  --sm-lg-tile: clamp(92px, 9vw, 132px);   /* tile height */
  --sm-lg-tone: .58;                        /* how light the gray logos are (1 = solid) */
  --sm-lg-ease: cubic-bezier(.22, 1, .36, 1);
  width: 100%;
}
.sm-lg__grid {
  display: grid;
  grid-template-columns: repeat(var(--sm-lg-cols), minmax(0, 1fr));
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.sm-lg__tile {
  position: relative;
  height: var(--sm-lg-tile);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow: hidden;
}
.sm-lg__tile::before { content: none !important; }
.sm-lg__logo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.sm-lg__logo img,
.sm-lg__logo .sm-logos__img {
  display: block;
  width: var(--w, 140px);
  max-width: 72%;
  max-height: 58%;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) contrast(1.1);
  opacity: var(--sm-lg-tone);
}

/* entrance: tiles rise and fade in one after another */
.sm-lg.is-js .sm-lg__tile { opacity: 0; transform: translateY(18px); }
.sm-lg.is-in .sm-lg__tile {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform 1.1s var(--sm-lg-ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* flip: the old logo drifts up and fades while the new one rises in under it (they overlap) */
.sm-lg__logo.is-out { animation: smLgOut .55s cubic-bezier(.4, 0, .6, 1) forwards; }
.sm-lg__logo.is-new { animation: smLgIn .7s var(--sm-lg-ease) .08s both; }
@keyframes smLgOut { to { opacity: 0; transform: translateY(-12px); } }
@keyframes smLgIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* tablets keep the set columns; phones use 2 */
@media (max-width: 640px) { .sm-lg.sm-lg { --sm-lg-cols: 2; --sm-lg-tile: 96px; } }
@media (prefers-reduced-motion: reduce) {
  .sm-lg.is-js .sm-lg__tile { opacity: 1; transform: none; }
  .sm-lg__logo.is-out, .sm-lg__logo.is-new { animation-duration: .01s; animation-delay: 0s; }
}
/* dark section (background set to dark in the shortcode): logos in soft white */
.sm-lg--dark .sm-lg__logo img { filter: grayscale(1) brightness(0) invert(1); opacity: .62; }