/* ===========================================================
   ADDSTV — Layout do app do anunciante
   Depende de tokens.css (modelo 1B "Painel Azul").
   Aqui so ha estrutura de pagina; cor e tipo vem dos tokens.
   =========================================================== */

/* ---------- Shell ---------- */
.app-header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,251,249,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.app-header-in{
  height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
}
.app-brand{display:flex;align-items:center;text-decoration:none}
.app-brand img{display:block}
.app-nav{display:flex;align-items:center;gap:var(--s-5)}
.app-nav a{font-size:13.5px;font-weight:500;color:var(--ink-600)}
.app-nav a:hover{color:var(--brand-blue);text-decoration:none}
.app-nav a.is-active{color:var(--ink-900);font-weight:600}
.app-nav a.btn{color:var(--primary-ink)}
/* ---------- Celular: menu na gaveta do hamburger (mobile first) ---------- */
.app-hamb{
  display:flex;align-items:center;gap:8px;height:42px;padding:0 10px 0 6px;flex:none;
  border:1.5px solid var(--border);border-radius:var(--r-full);background:var(--white);cursor:pointer;
}
.app-hamb-avatar{
  width:30px;height:30px;border-radius:var(--r-full);display:grid;place-items:center;
  background:var(--brand-blue);color:#fff;font-family:var(--font-display);font-weight:700;font-size:12px;
}
.app-hamb-linhas{display:grid;gap:4px;padding-left:4px}
.app-hamb-linhas i{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink-700)}
.app-nav{display:none}
.app-brand img{height:32px}
@media(min-width:900px){
  .app-hamb{display:none}
  .app-nav{display:flex}
  .app-brand img{height:38px}
}

.app-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(10,35,64,.5);
  opacity:0;pointer-events:none;transition:opacity .24s ease;
}
.app-overlay.is-open{opacity:1;pointer-events:auto}
.app-gaveta{
  position:fixed;top:0;bottom:0;right:0;z-index:95;width:min(86vw,320px);
  background:var(--surface-dark);color:#C8DCF5;display:flex;flex-direction:column;
  transform:translateX(100%);visibility:hidden;transition:transform .24s ease,visibility 0s linear .24s;
}
.app-gaveta.is-open{transform:none;visibility:visible;transition:transform .24s ease;box-shadow:-8px 0 30px rgba(0,0,0,.25)}
.app-gaveta-topo{
  height:64px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--s-4) 0 var(--s-5);border-bottom:1px solid rgba(255,255,255,.10);
}
.app-gaveta-topo img{display:block;filter:brightness(0) invert(1)}
.app-gaveta-x{
  width:40px;height:40px;border:0;border-radius:var(--r-md);background:rgba(255,255,255,.08);
  color:#fff;font-size:18px;cursor:pointer;
}
.app-gaveta-user{display:flex;align-items:center;gap:12px;padding:var(--s-5);border-bottom:1px solid rgba(255,255,255,.10)}
.app-gaveta-avatar{
  width:42px;height:42px;flex:none;border-radius:var(--r-full);display:grid;place-items:center;
  background:var(--brand-blue);color:#fff;font-family:var(--font-display);font-weight:700;
}
.app-gaveta-nome{color:#fff;font-weight:600;font-size:15px;line-height:1.3}
.app-gaveta-email{font-size:12.5px;color:#8FB2D8;word-break:break-all}
.app-gaveta-nav{flex:1;overflow-y:auto;padding:var(--s-3)}
.app-gaveta-grupo{
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#5B84B8;padding:var(--s-4) var(--s-3) var(--s-2);
}
.app-gaveta-nav a{
  display:flex;align-items:center;gap:12px;min-height:48px;padding:0 12px;border-radius:var(--r-md);
  color:#C8DCF5;font-size:15.5px;font-weight:500;text-decoration:none;
}
.app-gaveta-nav a:hover,.app-gaveta-nav a:active{background:rgba(255,255,255,.08);color:#fff}
.app-gaveta-nav a.is-active{background:var(--brand-blue);color:#fff;font-weight:600}
.app-gaveta-ico{width:22px;flex:none;text-align:center;font-size:16px}
.app-gaveta-pe{flex:none;padding:var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.10)}
.app-gaveta-sair{
  width:100%;min-height:48px;border:0;border-radius:var(--r-md);background:rgba(255,255,255,.08);
  color:#fff;font-family:var(--font);font-size:15px;font-weight:600;cursor:pointer;
}
@media(min-width:900px){.app-gaveta,.app-overlay{display:none}}

.app-main{min-height:60vh;padding-block:var(--s-8) var(--s-16)}

.app-footer{border-top:1px solid var(--border-soft);background:var(--surface-alt);padding-block:var(--s-8)}
.app-footer-in{display:flex;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap}
.app-footer-brand{
  font-family:var(--font-display);font-weight:700;font-size:18px;
  letter-spacing:var(--tracking-display);color:var(--ink-900);
}

/* ---------- Hero (home) ---------- */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-10);align-items:center;margin-bottom:var(--s-12)}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:var(--s-6)}}
.hero h1{margin-bottom:var(--s-4)}
.hero p.lead{font-size:16px;line-height:1.7;color:var(--ink-600);max-width:52ch;margin-bottom:var(--s-5)}
.hero-actions{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}

/* Painel de exemplo do 1B, reaproveitado como prova social */
.hero-panel{display:flex;flex-direction:column;gap:var(--s-4)}
.hero-panel .panel{display:flex;flex-direction:column;gap:var(--s-3)}

/* ---------- Stepper ---------- */
.stepper{
  list-style:none;margin:0 0 var(--s-8);padding:0;
  display:flex;gap:var(--s-2);flex-wrap:wrap;
}
.step{display:flex;align-items:center;gap:var(--s-2);flex:1;min-width:120px}
.step-n{
  width:26px;height:26px;flex:none;border-radius:var(--r-full);
  display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--ink-050);color:var(--ink-400);border:1.5px solid var(--border);
}
.step-label{font-size:12.5px;font-weight:500;color:var(--ink-400);white-space:nowrap}
.step.is-current .step-n{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
.step.is-current .step-label{color:var(--ink-900);font-weight:600}
.step.is-done .step-n{background:var(--brand-blue-050);border-color:var(--border-blue);color:var(--brand-blue)}
.step.is-done .step-label{color:var(--ink-600)}
@media(max-width:720px){
  .step-label{display:none}
  .step{flex:none;min-width:0}
}

/* ---------- Layout do fluxo: conteudo + resumo fixo ---------- */
.flow{display:grid;grid-template-columns:1fr 340px;gap:var(--s-6);align-items:start}
.flow>*{min-width:0}   /* texto longo (nome do arquivo) nao alarga a coluna */
@media(max-width:980px){.flow{grid-template-columns:1fr}}
.flow-aside{position:sticky;top:calc(var(--header-h) + var(--s-5))}
/* revisao: so o anuncio, numa coluna estreita */
.flow.flow-unica{grid-template-columns:minmax(0,640px);justify-content:center}
.revisao{overflow:hidden}
.revisao-tv{aspect-ratio:9/16;width:min(100%,34.8vh);margin:var(--s-4) auto 0;background:#000;display:grid;place-items:center;border-radius:var(--r-md);overflow:hidden}
.revisao-tv img,.revisao-tv video{width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:980px){.flow-aside{position:static}}

/* ---------- Cartoes de estabelecimento ---------- */
.est-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s-4)}
.est-card{
  display:flex;gap:var(--s-4);padding:var(--s-5);text-align:left;width:100%;
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);
  cursor:pointer;transition:border-color .15s,box-shadow .15s;font:inherit;color:inherit;
}
.est-card:hover{border-color:var(--brand-blue);box-shadow:var(--sh-2)}
.est-card[aria-pressed="true"]{border-color:var(--brand-blue);box-shadow:var(--sh-primary)}
.est-emoji{
  width:52px;height:52px;flex:none;border-radius:var(--r-md);
  display:grid;place-items:center;font-size:26px;background:var(--surface-alt);
}
.est-nome{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink-900);letter-spacing:-.01em}
.est-meta{font-size:12.5px;color:var(--ink-500);line-height:1.5}

/* ---------- Cartoes de tela (TV) ---------- */
.tela-list{display:grid;gap:var(--s-3)}
.tela-card{
  display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);width:100%;text-align:left;
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-md);
  cursor:pointer;transition:border-color .15s,background .15s;font:inherit;color:inherit;
}
.tela-card:hover:not(:disabled){border-color:var(--brand-blue)}
.tela-card[aria-pressed="true"]{border-color:var(--brand-blue);background:var(--brand-blue-050)}
.tela-card:disabled{opacity:.5;cursor:not-allowed}
.tela-num{
  width:46px;height:46px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--surface-dark);color:#fff;font-family:var(--font-display);font-weight:700;font-size:15px;
}
.tela-card[aria-pressed="true"] .tela-num{background:var(--brand-blue)}
.tela-nome{font-weight:600;font-size:14.5px;color:var(--ink-900)}
.tela-meta{font-size:12.5px;color:var(--ink-500)}
.tela-preco{margin-left:auto;text-align:right;flex:none}
.tela-preco b{
  font-family:var(--font-display);font-size:16px;color:var(--brand-blue);
  letter-spacing:var(--tracking-display);
}

/* ---------- Resumo lateral ---------- */
.resumo-linha{display:flex;justify-content:space-between;gap:var(--s-3);font-size:13.5px;padding:6px 0}
.resumo-linha span:first-child{color:var(--ink-500)}
.resumo-linha span:last-child{color:var(--ink-800);font-weight:500;text-align:right}
.resumo-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  padding-top:var(--s-3);border-top:1px solid var(--border-blue);margin-top:var(--s-2);
}
.resumo-total b{
  font-family:var(--font-display);font-size:28px;letter-spacing:var(--tracking-display);
  color:var(--accent);line-height:1;
}

/* ---------- Upload ---------- */
.drop{
  border:1.5px dashed var(--border-strong);border-radius:var(--r-md);background:var(--white);
  padding:var(--s-8) var(--s-5);text-align:center;cursor:pointer;transition:border-color .15s,background .15s;
}
.drop:hover,.drop.is-over{border-color:var(--brand-blue);background:var(--brand-blue-050)}
.drop-icon{font-size:30px;line-height:1;margin-bottom:var(--s-2)}
.preview{
  border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--ink-050);
  display:grid;place-items:center;min-height:180px;
}
.preview img,.preview video{width:100%;max-height:320px;object-fit:contain;display:block;background:#000}

/* Enquadramento vertical: a rede inteira e 1080x1920 (9:16).
   A moldura mostra exatamente o que a tela vai exibir — arte deitada
   aparece com as tarjas que apareceriam no player. */
.preview-v{
  width:100%;max-width:230px;margin-inline:auto;aspect-ratio:9/16;
  min-height:0;background:#000;
}
.preview-v img,.preview-v video{width:100%;height:100%;max-height:none;object-fit:contain}

/* ---------- Pagamento ---------- */
.pix-box{display:flex;gap:var(--s-5);align-items:flex-start;flex-wrap:wrap}
.pix-qr{
  width:172px;height:172px;flex:none;border-radius:var(--r-md);background:#fff;
  border:1px solid var(--border);display:grid;place-items:center;padding:10px;
}
.pix-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.6;
  background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--s-3);word-break:break-all;color:var(--ink-700);
}
.metodo-tabs{display:flex;gap:var(--s-2);margin-bottom:var(--s-5)}

/* ---------- Linha do tempo (acompanhar) ---------- */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline li{position:relative;padding:0 0 var(--s-5) var(--s-6)}
.timeline li::before{
  content:'';position:absolute;left:5px;top:6px;width:9px;height:9px;border-radius:50%;
  background:var(--brand-blue);
}
.timeline li::after{
  content:'';position:absolute;left:9px;top:16px;bottom:0;width:1px;background:var(--border);
}
.timeline li:last-child{padding-bottom:0}
.timeline li:last-child::after{display:none}
.timeline-ev{font-size:14px;font-weight:600;color:var(--ink-800)}
.timeline-em{font-size:12.5px;color:var(--ink-500)}

/* ---------- Diversos ---------- */
.qr-hit{
  display:flex;gap:var(--s-4);align-items:center;
  background:var(--brand-blue-050);border:1px solid var(--border-blue);
  border-radius:var(--r-lg);padding:var(--s-5);margin-bottom:var(--s-6);
}
.qr-hit .est-emoji{background:var(--white)}
.empty{
  text-align:center;padding:var(--s-12) var(--s-5);color:var(--ink-500);
  border:1.5px dashed var(--border);border-radius:var(--r-md);
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Tabela responsiva (mobile first) ----------
   Ate 760px cada linha vira um cartao: a 1a coluna e o titulo do cartao
   e as outras ficam em duas colunas, rotulo em cima do valor. O rotulo
   vem do atributo data-l do <td>. */
@media(max-width:760px){
  .tbl-cards table.tbl{min-width:0;display:block}
  .tbl-cards table.tbl thead{display:none}
  .tbl-cards table.tbl tbody{display:block;width:100%}
  .tbl-cards table.tbl tr{
    display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s-4);row-gap:var(--s-3);
    border:1px solid var(--border);border-radius:var(--r-sm);
    margin-bottom:var(--s-3);padding:var(--s-4);background:var(--surface);
  }
  .tbl-cards table.tbl tr:hover{background:var(--surface)}
  .tbl-cards table.tbl td{display:block;border:0;padding:0;text-align:left;min-width:0}
  .tbl-cards table.tbl td::before{
    content:attr(data-l);display:block;margin-bottom:2px;
    font-size:10.5px;font-weight:600;text-transform:uppercase;
    letter-spacing:var(--tracking-label);color:var(--ink-400);
  }
  .tbl-cards table.tbl td:first-child{
    grid-column:1 / -1;padding-bottom:var(--s-3);border-bottom:1px solid var(--border-soft);
  }
  .tbl-cards table.tbl td:first-child::before{display:none}
  .tbl-cards table.tbl td.td-largo{grid-column:1 / -1}
  .tbl-cards table.tbl td:empty{display:none}
  .tbl-cards .table-wrap,.tbl-cards.table-wrap{overflow:visible;border:0;background:none}
}

/* ---------- Notas de instrucao: discretas, nao competem com as etapas ---------- */
.nota{font-size:12.5px;line-height:1.5;color:var(--ink-400)}
.nota:not([class*="mb-"]){margin-bottom:0}
.nota-ok{color:var(--success,#0B6E38)}
.nota-alerta{color:#9A5B00}
.link-discreto{display:inline-block;font-size:13px;color:var(--brand-blue);cursor:pointer}
.truncar{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Etapa 1: locais (mobile first) ---------- */
.loc-grid{display:grid;grid-template-columns:1fr;gap:var(--s-4)}
@media(min-width:640px){.loc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.loc-grid{grid-template-columns:repeat(3,1fr)}}
.loc-card{
  display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  font:inherit;color:inherit;transition:transform .15s,box-shadow .15s,border-color .15s;
}
.loc-card:hover{border-color:var(--brand-blue);box-shadow:var(--sh-2)}
.loc-card:active{transform:scale(.985)}
.loc-capa{position:relative;height:92px;display:flex;align-items:flex-end;padding:0 var(--s-4)}
.loc-emoji{
  width:64px;height:64px;margin-bottom:-26px;border-radius:18px;display:grid;place-items:center;
  font-size:36px;background:var(--white);box-shadow:0 6px 18px rgba(10,35,64,.18);
}
.loc-tvs{
  position:absolute;top:10px;right:10px;font-size:12px;font-weight:700;color:#fff;
  background:rgba(0,0,0,.28);padding:4px 10px;border-radius:var(--r-full);backdrop-filter:blur(4px);
}
.loc-corpo{padding:34px var(--s-4) var(--s-4)}
.loc-nome{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink-900);letter-spacing:-.01em;line-height:1.2}
.loc-meta{font-size:13px;color:var(--ink-500);margin-top:2px}
.loc-rodape{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);margin-top:var(--s-3);
  padding-top:var(--s-3);border-top:1px solid var(--border-soft);font-size:13px;color:var(--ink-500)}
.loc-preco small{font-size:11.5px}
.loc-preco b{color:var(--brand-blue);font-size:15px}

/* local ja escolhido */
.loc-escolhido{
  display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3);padding-right:var(--s-4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
}
.loc-escolhido .loc-capa{width:64px;height:64px;flex:none;border-radius:14px;padding:0;align-items:center;justify-content:center}
.loc-escolhido .loc-emoji{width:auto;height:auto;margin:0;background:none;box-shadow:none;font-size:34px}
.loc-escolhido .loc-meta{font-size:12.5px}

/* ---------- Etapa 1: TVs desenhadas ---------- */
.tv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
@media(min-width:760px){.tv-grid{grid-template-columns:repeat(3,1fr)}}
.tv-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;
  padding:var(--s-4) var(--s-3);background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);
  font:inherit;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;
}
.tv-card:active:not(:disabled){transform:scale(.97)}
.tv-card[aria-pressed="true"]{border-color:var(--brand-blue);box-shadow:0 0 0 3px var(--brand-blue-100, #D6E7FF)}
.tv-card:disabled{opacity:.55;cursor:not-allowed}
.tv-ilus{width:100%;max-width:150px;margin-bottom:var(--s-3)}
.tv-tela{
  position:relative;aspect-ratio:16/9;border-radius:6px;border:5px solid #1B2432;
  background:linear-gradient(160deg,#2A3444,#12161E);display:grid;place-items:center;
  transition:background .2s;
}
.tv-card[aria-pressed="true"] .tv-tela{background:linear-gradient(135deg,#0B72F0,#5AA2FF);box-shadow:0 0 18px rgba(11,114,240,.45)}
.tv-num{font-family:var(--font-display);font-weight:700;font-size:13px;color:rgba(255,255,255,.75);letter-spacing:.04em}
.tv-card[aria-pressed="true"] .tv-num{color:#fff}
.tv-check{
  position:absolute;top:-10px;right:-10px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-size:13px;font-weight:700;border:2px solid #fff;
}
.tv-pe{width:34%;height:6px;margin:0 auto;background:#1B2432;border-radius:0 0 6px 6px}
.tv-nome{font-weight:600;font-size:14px;color:var(--ink-900);line-height:1.25}
.tv-meta{font-size:12px;color:var(--ink-500);margin-top:2px}
.tv-preco{margin-top:6px;font-size:13px}
.tv-preco b{color:var(--brand-blue)}
.tv-preco small{color:var(--ink-400)}

/* horarios e regras do local: recolhido */
.regras-local{border-top:1px solid var(--border-soft);padding-top:var(--s-3)}
.regras-local summary{cursor:pointer;font-size:13px;color:var(--ink-500);font-weight:500;list-style-position:inside}
.regras-corpo{padding-top:var(--s-3)}

/* continuar: preso no rodape do celular */
.barra-continuar{position:sticky;bottom:0;z-index:40;margin-top:var(--s-6);padding-bottom:env(safe-area-inset-bottom)}
.barra-continuar-in{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-3) var(--s-3) var(--s-3) var(--s-5);box-shadow:0 -6px 24px rgba(10,35,64,.10);
}
.barra-titulo{font-weight:700;color:var(--ink-900);font-size:15px}
.barra-sub{font-size:12.5px;color:var(--ink-500)}
@media(max-width:640px){
  .barra-continuar{margin-inline:calc(var(--s-5) * -1)}
  .barra-continuar-in{border-radius:0;border-inline:0;border-bottom:0}
}

/* ---------- Etapa 2: escolher a arte ---------- */
.midia-opcoes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.midia-opcao{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;
  min-height:132px;padding:var(--s-4);cursor:pointer;
  background:var(--surface-alt);border:1.5px solid var(--border);border-radius:var(--r-lg);
  transition:border-color .15s,background .15s,transform .15s;
}
.midia-opcao:hover,.midia-opcao.is-over{border-color:var(--brand-blue);background:var(--brand-blue-050)}
.midia-opcao:active{transform:scale(.97)}
.midia-opcao-ico{font-size:34px;line-height:1}
.midia-opcao-titulo{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink-900);margin-top:6px}
.midia-opcao-sub{font-size:12px;color:var(--ink-500)}
.midia-opcoes-uma{grid-template-columns:1fr}
/* opcao ainda nao liberada: sem cor, nao clica */
.midia-opcao.is-breve{position:relative;cursor:not-allowed;filter:grayscale(1);opacity:.55;background:var(--surface-alt)}
.midia-opcao.is-breve:hover{border-color:var(--border);background:var(--surface-alt)}
.midia-opcao.is-breve:active{transform:none}
.midia-breve-selo{
  position:absolute;top:8px;right:8px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-600);background:var(--white);border:1px solid var(--border);padding:2px 7px;border-radius:var(--r-full);
}
.midia-opcoes-uma .midia-opcao{min-height:150px}
.preview-h{display:block;width:100%;min-height:0;aspect-ratio:16/9;background:#000}
.preview-h img,.preview-h video{width:100%;height:100%;max-height:none;object-fit:contain}