.cnn-format-guide{display:grid;grid-template-columns:320fr 576fr 135fr;align-items:end;gap:32px;margin:36px 0;padding:40px;background:rgba(8,10,14,.36);border-radius:4px}
.cnn-format-shape{display:grid;place-items:center;width:100%;border:1px solid rgba(255,255,255,.65);background:linear-gradient(135deg,rgba(235,35,43,.23),rgba(255,255,255,.04));box-sizing:border-box}
.cnn-format-shape span{font-size:clamp(22px,3vw,40px);font-weight:500;letter-spacing:-.04em;color:#c48d91;background:linear-gradient(135deg,#d2a0a3,#ac737b);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.cnn-format p{margin:14px 0 0;text-align:center;text-transform:uppercase;font-size:11px;letter-spacing:.14em;color:#c4c6cb}
@media(max-width:600px){.cnn-format-guide{grid-template-columns:minmax(0,320fr) minmax(0,576fr) minmax(0,135fr);gap:10px;padding:16px}.cnn-format{min-width:0}.cnn-format p{white-space:nowrap}.cnn-format-shape span{font-size:clamp(12px,3vw,18px)}.cnn-format p{font-size:8px;letter-spacing:.04em}}

.cnn-formats-panel{background:#261315;border-radius:4px;margin:36px 0;overflow:hidden}
.cnn-formats-panel #tile-formats{background:transparent;margin:0}
.cnn-formats-panel figure.cnn-breakpoints{background:transparent;margin:0;padding-top:0}


/* Keep the mobile opening gradient in document flow and fade once to black. */
@media(max-width:700px){
 .cnn-cover-page{--bg:#000;background-color:#000;background-image:radial-gradient(ellipse at 90% 0%,#99090080 0%,#99090000 63%),linear-gradient(180deg,#541516 0%,#341011 42%,#100606 84%,#000 100%);background-attachment:scroll;background-size:100% max(560px,100svh);background-position:top center;background-repeat:no-repeat}
}

/* A viewport layer preserves the desktop gradient on iPad Safari, where
   background-attachment: fixed can fall back to a repeating scroll background. */
@media(min-width:701px){
 .cnn-cover-page{isolation:isolate;background-image:none;background-repeat:no-repeat}
 .cnn-cover-page::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 90% 0%,#99090080 0%,#99090000 63%),linear-gradient(180deg,#541516 0%,#341011 42%,#100606 84%,#160d0d 100%);background-repeat:no-repeat}
}