/* Miniaturas reais das pranchas do próprio Atlas na lista de áreas. */
.phase-list > div { grid-template-columns: 87px minmax(0, 1fr); }
.phase-thumb {
  grid-row: span 2;
  position: relative;
  display: block;
  width: 87px;
  height: 72px;
  overflow: hidden;
  background: var(--cream);
}
.phase-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.phase-list .phase-thumb span {
  position: absolute;
  top: 0;
  left: 0;
  grid-row: auto;
  padding: 2px 5px;
  background: rgba(15, 48, 39, .86);
  color: #fff;
  font-size: .68rem;
  line-height: 1.3;
}
@media (max-width: 420px) {
  .phase-list > div { grid-template-columns: 72px minmax(0, 1fr); }
  .phase-thumb { width: 72px; height: 64px; }
}