.example-gallery { width:min(980px,calc(100vw - 36px)); max-width:980px; max-height:min(90dvh,920px); padding:0; overflow:auto; border:1px solid #a8b8ca; border-radius:12px; background:#f7f9fc; box-shadow:0 24px 80px #12283b70; }
.example-gallery::backdrop { background:#14283bcc; backdrop-filter:blur(3px); }
.example-gallery-header { padding:22px 26px 16px; background:linear-gradient(130deg,#dfeafa,#f8fafc 65%); border-bottom:1px solid #cfdae5; }
.example-gallery-header h2 { margin:0 0 8px; font-size:21px; color:#173956; }
.example-gallery-header p { margin:0; font-size:13px; color:#557087; }
.example-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:20px 26px 10px; }
.example-card { display:flex; flex-direction:column; height:auto; min-height:0; overflow:hidden; padding:0; text-align:left; border:1px solid #c8d5e3; border-radius:9px; background:#fff; box-shadow:0 3px 12px #28466416; }
.example-card:hover:not(:disabled),.example-card:focus-visible { border-color:#397fc2; box-shadow:0 6px 20px #2846642b; }
.example-card img { width:100%; aspect-ratio:16/7; object-fit:cover; background:#c9d7e8; }
.example-card-copy { display:flex; flex-direction:column; gap:5px; padding:11px 13px 13px; }
.example-card strong { font-size:15px; color:#173956; }
.example-card small { color:#6d8296; font-size:11px; font-weight:500; }
.example-card span span { color:#435c72; font-size:12px; line-height:1.5; font-weight:400; }
#example-gallery-status { min-height:22px; margin:2px 26px 10px; color:#486781; font-size:12px; }
#example-gallery-status[data-error="true"] { color:#af3030; }
.example-gallery-footer { position:sticky; bottom:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 26px 17px; border-top:1px solid #d6e0e9; background:#f1f5f9; }
.example-gallery-footer label { justify-content:flex-start; margin:0; font-size:12px; }
.example-gallery-footer input { width:16px; height:16px; }
.example-gallery-footer button { padding:7px 16px; }
@media(max-width:650px) { .example-gallery { width:calc(100vw - 16px); max-height:94dvh; } .example-gallery-header { padding:17px; } .example-grid { grid-template-columns:1fr; gap:12px; padding:15px 17px 8px; } #example-gallery-status { margin:2px 17px 10px; } .example-gallery-footer { padding:12px 17px; } }