.cm-ob-banner { margin: 24px 0; }
.cm-ob-banner * { box-sizing: border-box; }
.cm-ob-banner-inner { width: calc(100% - 32px); max-width: 1920px; margin: auto; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; }
.cm-ob-banner-brand { display: block; min-width: 0; aspect-ratio: 380/200; background: #000; }
.cm-ob-banner-brand img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cm-ob-banner-actions { grid-column: span 4; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; min-width: 0; }
.cm-ob-banner-button { display: flex; align-items: center; justify-content: center; min-width: 0; max-width: 200; aspect-ratio: 380/200; padding: 12px; border: 1px solid transparent; border-radius: 0; text-decoration: none; text-align: center; font-family: 'Noto Serif',Georgia,serif; font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: 0; overflow-wrap: anywhere; color: #17130b; }
.cm-ob-banner-button--fiction { background: #f4cc70; }
.cm-ob-banner-button--documentary { background: #dba848; }
.cm-ob-banner-button--mention-one { background: #f1ddaa; }
.cm-ob-banner-button--mention-two { background: #b58227; color: #fff; }
.cm-ob-banner-button:hover { border-color: #17130b; }
.cm-ob-banner-button:focus-visible, .cm-ob-banner-brand:focus-visible { outline: 3px solid #17130b; outline-offset: 2px; }
@media (max-width: 1600px) { .cm-ob-banner-button { font-size: 24px; } }
@media (max-width: 1200px) { .cm-ob-banner-button { font-size: 20px; padding: 8px; } }
@media (max-width: 1000px) { .cm-ob-banner-button { font-size: 16px; } }
@media (max-width: 780px) {
    .cm-ob-banner-inner { max-width: 380px; grid-template-columns: minmax(0,1fr); }
    .cm-ob-banner-actions { grid-column: auto; grid-template-columns: minmax(0,1fr); }
    .cm-ob-banner-button { font-size: 24px; padding: 16px; }
}