/* WaveOps · peças que só a Plataforma usa (spec 7.4 e 15). Abertura, véus, grade editorial, definições,
   colunas numeradas, seletor, cartões e formulário vêm de components.css. Aqui: a proporção da
   abertura, as duas maquetes, o diagrama, os módulos por situação, a tabela e o aviso final. */

/* ---------- Abertura ---------- */
/* O cartão opaco recupera a hierarquia do contexto escuro, que o texto sobre a onda não usa. */
.wo-plataforma-interesse {
  min-width: 0;
  --wo-texto-2: var(--wo-clara-2);
  --wo-texto-3: var(--wo-clara-3);
  --wo-acento-texto: var(--wo-violeta-texto);
}

.wo-plataforma-interesse .wo-rotulo {
  color: var(--wo-texto-2);
}

/* O erro continua no parcial, logo após a linha. A grade o apresenta junto ao campo e antes do envio. */
.wo-plataforma-interesse .wo-campo:has(.wo-form-interesse__linha) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.wo-plataforma-interesse .wo-form-interesse__linha {
  display: contents;
}

.wo-plataforma-interesse .wo-form-interesse__linha .wo-btn {
  grid-row: 4;
  justify-self: start;
  margin-top: var(--wo-espaco-2);
}

.wo-plataforma-interesse .wo-erro-campo {
  grid-row: 3;
}

/* O selo é translúcido e, sobre a onda, o âmbar ficaria abaixo de 4,5:1: a pílula põe o cartão noite
   por baixo. */
.wo-plataforma-abertura__situacao {
  display: inline-flex;
  border-radius: var(--wo-raio-pilula);
  background: var(--wo-cartao-noite);
}

.wo-plataforma-abertura__workspace {
  min-width: 0;
}

/* No cartão, o formulário ocupa a largura toda. A grade mantém campo, erro e envio nessa ordem;
   o botão tem a largura do texto e em 360 px fica fora da faixa do WhatsApp flutuante. */
.wo-plataforma-interesse .wo-form-interesse {
  max-width: none;
  margin-top: 0;
}

/* Botão de 5.4 (40 px, 44 px abaixo de 768 px): os 52 px eram para dividir a linha com o campo. */
.wo-plataforma-interesse .wo-btn--grande {
  min-height: var(--wo-btn-altura);
}

/* "Nota" de 5.2. */
.wo-plataforma-interesse .wo-form-interesse__nota {
  font-size: var(--wo-texto-pequeno);
  line-height: 1.45;
}

/* Depois do envio, a confirmação fica sozinha no cartão. */
.wo-plataforma-interesse .wo-confirmacao-caixa {
  margin-top: 0;
}

/* ---------- Maquetes (workspace e telas) ----------
   Cartões de interface com o aviso de ilustração em "Nota" de 5.2, sem palavra sozinha na última linha. */
.wo-plataforma-workspace {
  gap: var(--wo-espaco-3);
  padding: var(--wo-espaco-3);
  text-wrap: pretty;
}

.wo-plataforma-workspace .wo-maquete__cabeca,
.wo-plataforma-tela .wo-maquete__cabeca {
  margin: 0;
}

.wo-plataforma-workspace .wo-maquete__aviso,
.wo-plataforma-tela .wo-maquete__aviso {
  text-wrap: balance;
}

.wo-plataforma-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wo-espaco-1);
}

.wo-plataforma-kpis > div {
  padding: var(--wo-espaco-2);
  border: var(--wo-linha-fina) solid var(--wo-borda);
  border-radius: var(--wo-raio);
}

.wo-plataforma-kpis span {
  display: block;
  color: var(--wo-texto-3);
  font-size: var(--wo-texto-pequeno);
  line-height: 1.45;
}

/* O número usa o "Título de linha" de 5.2. */
.wo-plataforma-kpis strong {
  display: block;
  margin-top: var(--wo-espaco-1);
  font-family: var(--wo-fonte-titulo);
  font-size: var(--wo-h3-linha);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.wo-plataforma-kpis--tela {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Estado de execução ou conexão: a forma do ponto acompanha a cor, quadrado no alerta. */
.wo-plataforma-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--wo-espaco-1);
  padding: var(--wo-espaco-miudo) var(--wo-espaco-1);
  border-radius: var(--wo-raio-pilula);
  background: var(--wo-fundo-2);
  color: var(--wo-texto-2);
  font-size: var(--wo-texto-pequeno);
  line-height: 1.45;
}

.wo-plataforma-estado::before {
  content: '';
  width: var(--wo-situacao-ponto);
  height: var(--wo-situacao-ponto);
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
}

.wo-plataforma-estado--ok {
  color: var(--wo-sucesso);
}

.wo-plataforma-estado--andamento {
  color: var(--wo-info);
}

.wo-plataforma-estado--falha {
  color: var(--wo-erro);
}

.wo-plataforma-estado--alerta {
  color: var(--wo-alerta);
}

.wo-plataforma-estado--alerta::before {
  border-radius: 0;
}

/* ---------- Workspace da abertura ---------- */
.wo-plataforma-workspace__corpo {
  display: flex;
  gap: var(--wo-espaco-3);
}

/* O menu lateral só cabe a partir de 768 px. */
.wo-plataforma-workspace__menu {
  display: none;
  flex: 0 0 var(--wo-plataforma-menu-largura);
  flex-direction: column;
  gap: var(--wo-espaco-miudo);
  padding: var(--wo-espaco-2);
  border-radius: var(--wo-raio);
  background: var(--wo-fundo-2);
  color: var(--wo-texto-2);
  font-size: var(--wo-texto-pequeno);
  line-height: 1.45;
}

/* "Etiqueta em caixa alta" de 5.2. */
.wo-plataforma-workspace__grupo {
  padding: var(--wo-espaco-1);
  color: var(--wo-texto-3);
  font-size: var(--wo-etiqueta-tamanho);
  font-weight: 500;
  letter-spacing: var(--wo-etiqueta-entreletra);
  line-height: 1.35;
  text-transform: uppercase;
}

.wo-plataforma-workspace__grupo--seguinte {
  margin-top: var(--wo-espaco-1);
}

.wo-plataforma-workspace__item {
  padding: var(--wo-espaco-1);
}

.wo-plataforma-workspace__item--ativo {
  border-radius: var(--wo-raio);
  background: var(--wo-acento-fundo);
  color: var(--wo-acento-texto);
  font-weight: 500;
}

.wo-plataforma-workspace__item--planejado {
  color: var(--wo-texto-3);
}

.wo-plataforma-workspace__principal {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: var(--wo-espaco-2);
}

.wo-plataforma-execucoes {
  padding: var(--wo-espaco-2);
  border: var(--wo-linha-fina) solid var(--wo-borda);
  border-radius: var(--wo-raio);
}

.wo-plataforma-execucoes__titulo {
  display: block;
  margin-bottom: var(--wo-espaco-1);
}

.wo-plataforma-execucoes__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wo-espaco-1) var(--wo-espaco-2);
  padding: var(--wo-espaco-1) 0;
  border-top: var(--wo-linha-fina) solid var(--wo-borda);
  font-size: var(--wo-texto-pequeno);
  line-height: 1.45;
}

.wo-plataforma-execucoes__nome {
  color: var(--wo-texto-2);
}

/* ---------- Como se encaixa ---------- */
ul.wo-plataforma-checks {
  gap: var(--wo-espaco-3);
  margin-top: var(--wo-espaco-4);
}

/* "Texto" de 5.2. */
.wo-plataforma-checks li {
  font-size: var(--wo-texto-corpo);
  line-height: 1.625;
}

/* Quem usa, a plataforma (borda de acento) e os sistemas do cliente (tracejado, ficam de fora). */
.wo-plataforma-diagrama__usa {
  padding: var(--wo-espaco-3);
  border: var(--wo-linha-fina) solid var(--wo-borda);
  border-radius: var(--wo-raio);
  background: var(--wo-superficie);
}

.wo-plataforma-diagrama__caixa {
  padding: var(--wo-espaco-3);
  border: var(--wo-linha-fina) solid var(--wo-acento-borda);
  border-radius: var(--wo-raio);
  background: var(--wo-superficie);
}

.wo-plataforma-diagrama__sistemas {
  padding: var(--wo-espaco-3);
  border: var(--wo-linha-fina) dashed var(--wo-borda-forte);
  border-radius: var(--wo-raio);
  background: var(--wo-superficie);
}

.wo-plataforma-diagrama__usa .wo-etiqueta {
  display: block;
  margin-bottom: var(--wo-espaco-2);
  color: var(--wo-texto-3);
}

.wo-plataforma-pilulas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wo-espaco-1);
}

.wo-plataforma-pilulas li {
  padding: var(--wo-espaco-1) var(--wo-espaco-2);
  border: var(--wo-linha-fina) solid var(--wo-borda-forte);
  border-radius: var(--wo-raio-pilula);
  color: var(--wo-texto-2);
  font-size: var(--wo-texto-pequeno);
  line-height: 1.45;
}

.wo-plataforma-diagrama__fio {
  width: var(--wo-linha-fina);
  height: var(--wo-espaco-3);
  margin: 0 auto;
  background: var(--wo-borda-forte);
}

.wo-plataforma-diagrama__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wo-espaco-2);
  margin-bottom: var(--wo-espaco-3);
}

.wo-plataforma-diagrama__titulo {
  display: inline-flex;
  align-items: center;
  gap: var(--wo-espaco-2);
}

/* O símbolo da marca no quadrado violeta plano (D14), sem o brilho. */
.wo-plataforma-diagrama__marca {
  display: grid;
  place-items: center;
  width: var(--wo-plataforma-marca-tamanho);
  height: var(--wo-plataforma-marca-tamanho);
  flex-shrink: 0;
  border-radius: var(--wo-raio);
  background: var(--wo-violeta);
}

.wo-plataforma-diagrama__marca svg {
  width: var(--wo-plataforma-simbolo-tamanho);
  height: var(--wo-plataforma-simbolo-tamanho);
}

.wo-plataforma-diagrama__camada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--wo-espaco-2);
  padding: var(--wo-espaco-2) 0;
  border-top: var(--wo-linha-fina) solid var(--wo-borda);
}

.wo-plataforma-diagrama__camada--nucleo .wo-plataforma-diagrama__nome {
  color: var(--wo-acento-texto);
}

/* "Nota" de 5.2; a descrição da camada, um tom acima. */
.wo-plataforma-diagrama__descricao {
  color: var(--wo-texto-2);
  font-size: var(--wo-texto-pequeno);
  line-height: 1.45;
  text-wrap: pretty;
}

.wo-plataforma-diagrama__conector span,
.wo-plataforma-diagrama__sistemas-nota {
  color: var(--wo-texto-3);
  font-size: var(--wo-texto-pequeno);
  line-height: 1.45;
}

.wo-plataforma-diagrama__conector {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wo-plataforma-diagrama__conector::before,
.wo-plataforma-diagrama__conector::after {
  content: '';
  width: var(--wo-linha-fina);
  height: var(--wo-espaco-2);
  background: var(--wo-borda-forte);
}

.wo-plataforma-diagrama__sistemas-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wo-espaco-1);
  margin-bottom: var(--wo-espaco-2);
}

/* ---------- Núcleo ---------- */
.wo-plataforma-responsabilidades {
  margin-top: var(--wo-espaco-3);
}

.wo-plataforma-governanca {
  display: grid;
  justify-items: start;
  gap: var(--wo-espaco-2);
  margin-top: var(--wo-espaco-3);
}

.wo-plataforma-governanca__texto {
  color: var(--wo-texto-3);
  font-size: var(--wo-texto-pequeno);
  line-height: 1.45;
}

/* ---------- Experiência de uso ----------
   Opção do seletor: nome da tela em "Título de cartão" e frase em "Nota". */
.wo-plataforma-seletor {
  gap: var(--wo-espaco-4);
  margin-top: var(--wo-espaco-5);
}

.wo-plataforma-tela__opcoes {
  flex-basis: var(--wo-plataforma-opcoes-largura);
}

.wo-plataforma-tela__opcao {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--wo-espaco-miudo);
  padding: var(--wo-espaco-2) var(--wo-espaco-3);
  background: var(--wo-superficie);
}

/* A opção escolhida ganha o tom de acento por cima da superfície, opaca como as outras: a frase não
   depende do brilho da onda atrás do véu. */
.wo-plataforma-tela__opcao[aria-pressed='true'] {
  background: linear-gradient(var(--wo-acento-fundo), var(--wo-acento-fundo)), var(--wo-superficie);
}

.wo-plataforma-tela__descricao {
  color: var(--wo-texto-3);
  font-size: var(--wo-texto-pequeno);
  font-weight: 400;
  line-height: 1.45;
  text-wrap: pretty;
}

.wo-plataforma-tela {
  flex: 2 1 var(--wo-plataforma-tela-largura);
  gap: var(--wo-espaco-3);
  padding: var(--wo-espaco-3);
  text-wrap: pretty;
}

.wo-plataforma-tela__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--wo-espaco-2);
}

.wo-plataforma-pendencias {
  padding: var(--wo-espaco-2);
  border: var(--wo-linha-fina) solid var(--wo-borda);
  border-radius: var(--wo-raio);
}

.wo-plataforma-pendencias__titulo {
  display: block;
  margin-bottom: var(--wo-espaco-2);
}

.wo-plataforma-pendencia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wo-espaco-1);
  padding: var(--wo-espaco-2) 0;
  border-top: var(--wo-linha-fina) solid var(--wo-borda);
  font-size: var(--wo-texto-pequeno);
  line-height: 1.45;
}

.wo-plataforma-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wo-espaco-2);
  padding: var(--wo-espaco-2);
  border: var(--wo-linha-fina) solid var(--wo-borda);
  border-radius: var(--wo-raio);
}

.wo-plataforma-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--wo-espaco-2);
  padding: var(--wo-espaco-2);
  border: var(--wo-linha-fina) solid var(--wo-borda);
  border-radius: var(--wo-raio);
}

/* Tracejado: o que ainda não está ligado. */
.wo-plataforma-linha--modelo,
.wo-plataforma-cartao--planejado {
  border-style: dashed;
}

.wo-plataforma-linha--falha {
  border-color: var(--wo-erro-borda);
}

.wo-plataforma-linha__texto {
  min-width: 0;
}

.wo-plataforma-linha__nome {
  display: block;
}

.wo-plataforma-linha__detalhe,
.wo-plataforma-cartao__texto {
  display: block;
  color: var(--wo-texto-3);
  font-size: var(--wo-texto-pequeno);
  line-height: 1.45;
}

.wo-plataforma-tela__corpo--grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A ação desenhada na tela: só a forma do botão de contorno. */
.wo-plataforma-acao {
  display: inline-flex;
  align-items: center;
  padding: var(--wo-espaco-1) var(--wo-espaco-2);
  border: var(--wo-linha-fina) solid var(--wo-borda);
  border-radius: var(--wo-raio-pilula);
  font-size: var(--wo-texto-pequeno);
  font-weight: 500;
  line-height: 1.43;
}

.wo-plataforma-acao--cartao {
  align-self: flex-start;
  margin-top: auto;
}

.wo-plataforma-etiqueta {
  align-self: flex-start;
  margin-top: auto;
  padding: var(--wo-espaco-miudo) var(--wo-espaco-1);
  border-radius: var(--wo-raio-pilula);
  background: var(--wo-acento-fundo);
  color: var(--wo-acento-texto);
  font-size: var(--wo-texto-pequeno);
  line-height: 1.45;
}

.wo-plataforma-etiqueta--planejado {
  background: var(--wo-fundo-2);
  color: var(--wo-texto-2);
}

/* ---------- Módulos ----------
   Uma coluna por situação; a primeira fica vazia, com o encaminhamento para o sob medida. */
.wo-plataforma-situacoes {
  display: grid;
  gap: var(--wo-espaco-5);
  margin-top: var(--wo-espaco-6);
}

.wo-plataforma-situacao {
  min-width: 0;
  border-top: var(--wo-linha-forte) solid var(--wo-texto);
}

.wo-plataforma-situacao__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wo-espaco-1);
  padding: var(--wo-espaco-3) 0;
}

/* "Nota" de 5.2. */
.wo-plataforma-situacao__legenda,
.wo-plataforma-modulo__area {
  color: var(--wo-texto-3);
  font-size: var(--wo-texto-pequeno);
  line-height: 1.45;
}

.wo-plataforma-vazio {
  padding: var(--wo-espaco-3);
  border: var(--wo-linha-fina) dashed var(--wo-borda-forte);
  border-radius: var(--wo-raio);
}

/* "Texto" de 5.2. */
.wo-plataforma-vazio__texto,
.wo-plataforma-modulo__texto {
  margin-top: var(--wo-espaco-2);
  color: var(--wo-texto-2);
  font-size: var(--wo-texto-corpo);
  line-height: 1.625;
  text-wrap: pretty;
}

.wo-plataforma-vazio .wo-link-seta {
  margin-top: var(--wo-espaco-2);
}

.wo-plataforma-modulos li {
  padding: var(--wo-espaco-3) 0;
  border-bottom: var(--wo-linha-fina) solid var(--wo-borda);
}

.wo-plataforma-modulos li:first-child {
  border-top: var(--wo-linha-fina) solid var(--wo-borda);
}

.wo-plataforma-modulo__cabeca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wo-espaco-miudo);
}

/* ---------- Plataforma ou projeto sob medida ----------
   No celular cada linha vira um bloco, com o rótulo da coluna vindo do data-label. */
.wo-plataforma-tabela {
  margin-top: var(--wo-espaco-5);
  border-top: var(--wo-linha-forte) solid var(--wo-texto);
}

/* "Texto" de 5.2. */
.wo-plataforma-cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wo-texto-corpo);
  line-height: 1.625;
}

.wo-plataforma-cmp th {
  padding: var(--wo-espaco-3);
  border-bottom: var(--wo-linha-fina) solid var(--wo-borda);
  text-align: left;
}

.wo-plataforma-cmp td {
  padding: var(--wo-espaco-3);
  border-bottom: var(--wo-linha-fina) solid var(--wo-borda);
  color: var(--wo-texto-2);
  text-align: left;
}

/* Colunas em "Título de cartão"; o canto em "Etiqueta em caixa alta". */
.wo-plataforma-cmp thead th {
  width: 40%;
}

.wo-plataforma-cmp thead th:first-child {
  width: 20%;
  font-weight: 500;
  font-family: var(--wo-fonte);
  font-size: var(--wo-etiqueta-tamanho);
  letter-spacing: var(--wo-etiqueta-entreletra);
  line-height: 1.35;
  text-transform: uppercase;
}

.wo-plataforma-cmp tbody th {
  font-weight: 400;
}

/* ---------- Assinatura e aviso final ---------- */
.wo-plataforma-principio__texto {
  margin-top: var(--wo-espaco-2);
}

.wo-plataforma-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wo-espaco-4) var(--wo-espaco-5);
  margin-top: var(--wo-espaco-6);
}

.wo-plataforma-aviso__texto {
  flex: 1 1 var(--wo-plataforma-aviso-largura);
  min-width: 0;
}

.wo-plataforma-aviso__titulo {
  margin-top: 0;
}

/* "Texto" de 5.2. */
.wo-plataforma-aviso__lead {
  margin-top: var(--wo-espaco-3);
  color: var(--wo-texto-2);
  font-size: var(--wo-texto-corpo);
  line-height: 1.625;
}

/* ---------- Larguras ---------- */
@media (max-width: 639px) {
  .wo-plataforma-workspace,
  .wo-plataforma-tela {
    padding: var(--wo-espaco-2);
  }

  /* O aviso pode quebrar em duas linhas: raio de cartão em vez de pílula. */
  .wo-plataforma-workspace .wo-maquete__aviso,
  .wo-plataforma-tela .wo-maquete__aviso {
    border-radius: var(--wo-raio);
  }

  .wo-plataforma-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .wo-plataforma-kpis > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--wo-espaco-2);
  }

  .wo-plataforma-kpis strong {
    margin-top: 0;
  }

  /* Estado sempre embaixo do nome: com a quebra automática, ele mudava de lugar entre as linhas. */
  .wo-plataforma-execucoes__linha,
  .wo-plataforma-pendencia,
  .wo-plataforma-linha {
    flex-direction: column;
    align-items: flex-start;
  }

  .wo-plataforma-tela__corpo--grade,
  .wo-plataforma-diagrama__camada {
    grid-template-columns: minmax(0, 1fr);
  }

  .wo-plataforma-diagrama__camada {
    gap: var(--wo-espaco-1);
  }

  .wo-plataforma-cmp,
  .wo-plataforma-cmp tbody,
  .wo-plataforma-cmp tr,
  .wo-plataforma-cmp tbody th,
  .wo-plataforma-cmp td {
    display: block;
    width: auto;
    border: 0;
  }

  .wo-plataforma-cmp thead {
    display: none;
  }

  .wo-plataforma-cmp tr {
    padding: var(--wo-espaco-3) 0;
    border-bottom: var(--wo-linha-fina) solid var(--wo-borda);
  }

  /* O critério vira o título do bloco, em "Título de cartão". */
  .wo-plataforma-cmp tbody th {
    padding: 0 0 var(--wo-espaco-1);
    font-family: var(--wo-fonte-titulo);
    font-size: var(--wo-h3-cartao);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.55;
  }

  .wo-plataforma-cmp td {
    padding: var(--wo-espaco-2) 0 0;
  }

  .wo-plataforma-cmp td::before {
    content: attr(data-label);
    display: block;
    color: var(--wo-texto-3);
    font-size: var(--wo-texto-pequeno);
    line-height: 1.45;
  }
}

@media (min-width: 640px) {
  .wo-plataforma-situacoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wo-plataforma-situacao:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) {
  .wo-plataforma-workspace__menu {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .wo-plataforma-abertura__workspace {
    grid-column: 1 / -1;
  }

  .wo-plataforma-situacoes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wo-espaco-4);
  }

  .wo-plataforma-situacao:first-child {
    grid-column: auto;
  }
}

/* Desde 1280 px, 8 partes para o texto: o título cai de cinco para quatro linhas e o cartão fica com
   379 px. Abaixo, o 7/5 compartilhado mantém o cartão largo o bastante em 1024 px. */
@media (min-width: 1280px) {
  .wo-plataforma-abertura {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }
}