.odna-slot { margin-inline: auto; max-width: 100%; }
.odna-slot img { display: block; max-width: 100%; height: auto; margin-inline: auto; }

/* o espaço reservado usa a medida real da posição: quando o banner entra,
   nada na página se move (sem layout shift) */
.odna-slot--vazio {
  width: min(100%, var(--w));
  aspect-ratio: var(--w) / var(--h);
  display: grid; place-items: center;
  background: #f1f1f3; border: 1px dashed #ccc; border-radius: 4px;
  color: #8a8a92; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
}

.odna-vitrine h3 { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .75rem; }
.odna-vitrine__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.odna-vitrine__grade a, .odna-vitrine__grade span {
  display: grid; place-items: center; padding: .75rem;
  border: 1px solid rgba(0,0,0,.08); border-radius: 6px; background: #fff;
  filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s;
}
.odna-vitrine__grade a:hover { filter: none; opacity: 1; }