.digitalToolGrid .lineDanceTool {
  background: linear-gradient(145deg, #7c1830, #25070f);
}

.digitalToolGrid .lineDanceTool .toolMark {
  font-size: 112px;
}

.digitalToolGrid .docMixPhoneTool {
  background: linear-gradient(145deg, #163d58, #071723);
  border: 1px solid #c9a65e;
}

.digitalToolGrid .docMixPhoneTool .toolMark {
  color: #dfbd77;
  font-size: 112px;
}

.digitalToolGrid .docMixPhoneTool > small {
  color: #f4d693;
  letter-spacing: 0.16em;
}

@media (width <= 1050px) {
  .digitalToolGrid .stepsTool {
    grid-column: auto;
  }
}

.digitalToolGrid .customerServiceTool { background: linear-gradient(145deg, #16365f, #0a172c); border: 1px solid #f4c85d; }
.digitalToolGrid .customerServiceTool .toolMark { color: #f4c85d; font-size: 90px; }
.digitalToolGrid .customerServiceTool > small { color: #f4d693; }

.digitalToolGrid .donussieTool {
  background: radial-gradient(circle at 88% 8%, #fff8ef26, transparent 34%), linear-gradient(145deg, #1b563f, #0d3024 72%, #7b183f);
  border: 1px solid #a52b58;
  overflow: hidden;
}
.digitalToolGrid .donussieTool .toolMark { background: #fff8ef; border: 3px solid #a52b58; color: #174f3b; font-size: 1.45rem; }
.digitalToolGrid .donussieTool > small { color: #f8d9e5; }
.digitalToolGrid .donussieTool .donussieToolPhoto { aspect-ratio: 3/2; border: 3px solid #fff8ef; border-radius: 16px; box-shadow: 0 18px 42px #051b1490; display: block; margin: 22px 0 20px; object-fit: cover; width: 100%; }
.digitalToolGrid .donussieTool a { background: #9b1f4d; color: #fff; }

.digitalToolGrid > article:not(.shhakeTool):not(.chopScratchTool) > .toolGalaxyToken {
  display: block;
  position: relative;
  float: none;
  width: 180px;
  height: auto;
  max-width: min(62vw, 100%);
  aspect-ratio: 1;
  object-fit: contain;
  margin: 22px auto 20px;
  border: 0;
  border-radius: 0;
  opacity: 1;
  box-shadow: none;
  background: transparent;
  pointer-events: none;
}
.digitalToolGrid > article:not(.shhakeTool):not(.chopScratchTool) > .toolGalaxyToken + ul {
  display: block;
  clear: both;
  width: 100%;
  max-width: none;
  white-space: normal;
}

@media (max-width: 760px) {
  .digitalToolGrid > article:not(.shhakeTool):not(.chopScratchTool) > .toolGalaxyToken {
    width: min(180px, 58vw);
    margin: 20px auto 18px;
  }

  .digitalToolGrid > article:not(.shhakeTool):not(.chopScratchTool) > .toolGalaxyToken ~ :is(p, ul, a) {
    width: 100%;
    max-width: none;
    white-space: normal;
  }
}

/* Full-width covers: place the token over the specific open artwork areas. */
.digitalToolGrid > .shhakeTool > .toolGalaxyToken,
.digitalToolGrid > .chopScratchTool > .toolGalaxyToken {
  position: absolute;
  float: none;
  z-index: 3;
  width: 180px;
  max-width: none;
  margin: 0;
}
.digitalToolGrid > .shhakeTool > .toolGalaxyToken { top: 110px; left: 51%; }
.digitalToolGrid > .chopScratchTool > .toolGalaxyToken { top: 34px; left: calc(54% - 194px); }
@media (max-width: 980px) {
  .digitalToolGrid > .shhakeTool > .toolGalaxyToken { top: 28px; left: auto; right: 28px; }
  .digitalToolGrid > .chopScratchTool > .toolGalaxyToken { top: auto; left: 24px; bottom: 180px; }
}