/* The 100 codes: additions on top of the sound-design freebie styles */
.visual-codes .code-card{padding:20px 22px 18px;margin:12px 0}
.visual-codes .code-card .prompt-top{margin-bottom:12px;flex-wrap:wrap;row-gap:10px}
.visual-codes .code-card h3{min-width:0;overflow-wrap:anywhere}
.visual-codes .code-card h3{font-size:21px;letter-spacing:-.03em}
.visual-codes .code-num{font-size:11px;letter-spacing:.08em;font-weight:500;color:var(--lightblue);margin-right:10px;vertical-align:3px}
.visual-codes .code-line{margin:0;font-size:15px;line-height:1.65;color:var(--cream)}
.visual-codes .code-proof{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 22px}
.visual-codes .code-proof figure{margin:0;min-width:0}
.visual-codes .code-proof .orig{grid-column:1/-1;width:62%;justify-self:center}
.visual-codes .code-proof img{width:100%;border-radius:12px;border:1px solid #140d0a33}
.visual-codes .code-proof figcaption{font-size:13px;font-weight:700;color:var(--blue);margin:8px 0 0}
.visual-codes .code-proof .orig figcaption{color:var(--muted);text-align:center}
.visual-codes .resource-save{font-size:22px;color:var(--blue)}
@media(max-width:760px){
  .visual-codes .code-card{padding:18px 17px 16px}
  .visual-codes .code-card .prompt-top{flex-direction:row;align-items:center}
  .visual-codes .code-card h3{font-size:19px;max-width:none}
  .visual-codes .code-line{font-size:15px}
  .visual-codes .code-proof{gap:10px}
}