/* Aula 7 · estilos próprios da demo (a base está em demos.css). */

/* Escolha da parte da bancada */
.a07-modos .dm-seg{gap:8px}
.a07-modos .dm-seg-btn{font-size:14px;padding:7px 15px}

/* Editores lado a lado (base B e ponto x) */
.a07-editores{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:flex-start}

/* Figuras pequenas em grade: blocos 2 × 2, imagens 8 × 8, base de Bernstein e coordenadas */
.a07-duas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.a07-quatro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:520px}
.a07-duas figure,.a07-quatro figure{display:grid;gap:5px;min-width:0;align-content:start}
.a07-duas figcaption,.a07-quatro figcaption{font-size:13px;line-height:1.4;color:var(--muted);text-align:center}
.a07-duas figcaption .m,.a07-quatro figcaption .m{color:var(--ink)}
.a07-grupo{display:grid;gap:12px}

/* Contorno: em demos.css, ".dm-tile span" (rótulo do ladrilho, em caixa alta) também pega a
   notação dentro do <small>; aqui ela volta ao normal. */
.dm-tile small span{font-size:inherit;font-weight:inherit;letter-spacing:0;text-transform:none;color:inherit}
.a07-usar{margin-left:8px;font-size:13px;padding:3px 10px}
@media(max-width:560px){
 .a07-duas.is-graficos{grid-template-columns:minmax(0,1fr)}
}