/*
 * Página `learning` (etapa G8) -- a moldura, e só ela.
 *
 * Transcreve as regras `.page__learning` do `main.css` que está no ar (linhas 2699-3121). O
 * escopo é `.pagina--learning`, que o `base.html` põe no `<main>` a partir do registro de
 * `backend/montagem` -- sem ele estas regras não teriam onde se pendurar, porque as classes
 * que os plugins emitem são as mesmas em toda página.
 *
 * ### As cinco faixas, e como cada uma é alcançada
 *
 * Esta é a primeira página do bloco G com **quatro faixas do mesmo tipo de plugin** (três
 * `RowPlugin` e uma `ColumnPlugin`), e a D2 deixou aqueles envelopes sem gancho por
 * instância de propósito. O que os distingue aqui é o que cada um tem dentro, e é isso que os
 * `:has()` abaixo dizem -- o mesmo recurso que o `banner.css`, o `canais.css` e o
 * `header.css` já usam.
 *
 * | faixa do original | seletor |
 * |---|---|
 * | `.wrapper__banner` | `> .banner` |
 * | `.wrapper__content` | `> .linha:has(> .bloco-sobre)` |
 * | `.wrapper__organization` | `> .coluna` |
 * | `.wrapper__about` | `> .linha:has(> .coluna)` |
 * | `.wrapper__list` | `> .linha:has(.topicos)` |
 *
 * **A E4 previa outro mecanismo para o `gap` dos cartões** -- "o seletor sai do `anchor` da
 * seção que a D2 já emite como `id`". Ele não foi necessário: a linha dos cartões é a única
 * `linha--center` da página, e o escopo `.pagina--learning` já a isola. Uma `SectionPlugin` a
 * mais só para pendurar um `id` seria envelope sem conteúdo.
 *
 * ### `flex-wrap: nowrap` nas três linhas, e não é enfeite
 *
 * A `linha` da D2 é `flex-wrap: wrap`, para o empilhamento móvel funcionar. As três faixas
 * deste desktop têm dois itens que **somados passam da largura da tela em telas médias** (615
 * + 610 na primeira), e o original, que não tem `wrap`, os encolhe. Com `wrap`, eles
 * quebrariam de linha entre 768px e ~1230px -- uma faixa que o original nunca desenhou
 * assim. O `@media` devolve o `wrap` onde ele é a intenção.
 */

.pagina--learning {
  padding-top: 62px;
  padding-bottom: 62px;
}

/* --------------------------------------------------------------------- o banner
 *
 * `.wrapper__banner`: **sem largura máxima e sem recuo**, e é isso que faz a foto encostar na
 * borda direita da tela. No original o arranjo é `justify-content: flex-end` com a `<img>`
 * depois do texto; aqui a variante `imagem-direita` da E1 é `row-reverse`, cujo início de
 * eixo já é a direita -- então o encosto vem de graça e não há `justify-content` a
 * transcrever.
 *
 * O `gap: 68px` também não vem: é o do componente.
 */
.pagina--learning > .banner {
  margin-bottom: 82px;
}

.pagina--learning > .banner .banner__imagem {
  max-width: 525px;
  width: 100%;
}

.pagina--learning > .banner .banner__conteudo {
  max-width: 475px;
  width: 100%;
  padding-right: 16px;
}

.pagina--learning > .banner .banner__titulo {
  line-height: 42px;
  margin-bottom: 72px;
}

/*
 * `display: block` é o que quebra a linha -- no original a quebra é um `<br>` dentro do
 * `<h2>`, e quebra de linha não entra no campo do editor.
 *
 * **A `line-height` é a mesma do `<h2>`, e é ela que põe a tinta no lugar.** Lá o destaque é a
 * **primeira** linha; aqui ele é a segunda, e o original o deixa herdar a `line-height` de
 * 42px do título -- então um bloco de 42px de entrelinha põe a palavra em script exatamente
 * onde ela está no original (medido: topo da caixa de tinta em `y: 261` nos dois, a 1440px
 * contra `www.sebeducation.com`).
 *
 * **Os 19px de `padding-bottom` são a altura que a linha inline tinha e o bloco não tem.** No
 * original a segunda linha do `<h2>` mede **61px**, e não 42: a caixa de 122px do script
 * desce abaixo da base da linha e a caixa da linha cresce para contê-la. Num bloco, quem
 * manda é só a `line-height`, então o `<h2>` sairia 19px mais curto -- e o banner é
 * `align-items: center`, então a coluna inteira subiria 9px, título e descrições com ela. É o
 * mesmo tipo de conta que a G2 e a G7 fizeram com margens negativas, aqui do lado que falta.
 */
.pagina--learning > .banner .banner__destaque {
  display: block;
  font-size: 122px;
  line-height: 42px;
  margin-left: 68px;
  padding: 0 0 19px;
}

/* 28/30px contra os 18/26 do componente, e o espaço até a segunda descrição. */
.pagina--learning > .banner .banner__descricao {
  font-size: 28px;
  line-height: 30px;
  margin-bottom: 32px;
}

/*
 * A `description-2`, que é um bloco de texto filho do banner (ela tem `<strong>` dentro, e o
 * campo da E1 é texto escapado -- ver `backend/montagem/learning.py`). 20px é o degrau
 * `seb-texto` da D3, que é o mesmo do original; só a entrelinha entra.
 */
.pagina--learning > .banner .texto--seb-texto {
  line-height: 28px;
}

/* --------------------------------------------------------------------- a prosa
 *
 * `.wrapper__content`: a linha decorativa, os três parágrafos e a foto à direita.
 */
.pagina--learning > .linha:has(> .bloco-sobre) {
  flex-wrap: nowrap;
  align-items: flex-start;
  margin-bottom: 82px;
}

/* 235px da linha + 25 de respiro + 355 do texto, que é a soma do original. */
.pagina--learning > .linha:has(> .bloco-sobre) > .bloco-sobre {
  width: 100%;
  max-width: 615px;
}

/*
 * A linha decorativa. O padrão do componente é o canto superior **direito**; aqui ela fica à
 * esquerda do texto, como no original, daí o `right: auto`. O tamanho é o do
 * `line-learning.svg` de antes da B7 (235x150) -- com um arquivo só, a altura de cada linha
 * passou a ser dever da página, e é o que a E2 registrou.
 */
.pagina--learning > .linha:has(> .bloco-sobre) .bloco-sobre__linha {
  left: 0;
  right: auto;
  top: 57px;
  width: 235px;
  height: 150px;
}

/*
 * `padding`, e não `margin`: a linha é posicionada em relação ao `.bloco-sobre`, e uma margem
 * no filho colapsaria com a do pai -- levando o bloco inteiro para baixo e a linha com ele.
 * Os 46px do original são o `margin-top` do `.content`, e o recuo lateral são os 235px da
 * linha mais os 25 de `margin-right` dela.
 */
.pagina--learning > .linha:has(> .bloco-sobre) .bloco-sobre__conteudo {
  padding-top: 46px;
  padding-left: 260px;
}

/* A `text-1`: 20px é o degrau `seb-texto`, e o negrito é campo do plugin. */
.pagina--learning > .linha:has(> .bloco-sobre) .texto--seb-texto {
  line-height: 28px;
  margin-bottom: 24px;
}

/* As duas `text-2`: 16px é o degrau `seb-texto-pequeno`. */
.pagina--learning > .linha:has(> .bloco-sobre) .texto--seb-texto-pequeno {
  line-height: 22px;
}

/*
 * **O espaço entre os dois parágrafos é um `<br>` no original**, solto entre eles. Uma linha
 * vazia no `.content`, que ali é Arial 16px sem `line-height` declarada -- 18px, medidos no
 * navegador contra `www.sebeducation.com`. Marcação de apresentação não vira plugin; o espaço
 * que ela produz vira esta regra.
 */
.pagina--learning > .linha:has(> .bloco-sobre) .texto--seb-texto-pequeno
  + .texto--seb-texto-pequeno {
  margin-top: 18px;
}

/* A foto do lado (`.cover2`), no envelope de animação da D6. */
.pagina--learning > .linha:has(> .bloco-sobre) > [data-aos] {
  max-width: 610px;
  width: 100%;
  margin-left: auto;
}

/*
 * `display: block` porque a imagem aqui é filha do envelope de animação, e não item flex da
 * faixa como no original: `inline` deixaria a caixa 4px mais alta que a foto, o espaço da
 * linha de base. As três fotos desta página são o mesmo caso.
 */
.pagina--learning > .linha:has(> .bloco-sobre) > [data-aos] .imagem {
  display: block;
  width: 100%;
}

/* --------------------------------------------------------------------- a organização
 *
 * `.wrapper__organization`: a coluna centrada de 1152px com o par título+descrição, os 3
 * cartões e o fecho. É um `ColumnPlugin`, que a D2 deixou sem geometria própria justamente
 * para a página dar a medida.
 */
.pagina--learning > .coluna {
  max-width: 1152px;
  padding: 0 16px;
  margin: 0 auto 62px;
}

/*
 * O `organization__title`: 32px contra os 28 do degrau `seb-subtitulo`. A cor, o peso e o
 * alinhamento são campos do plugin, não daqui.
 */
.pagina--learning > .coluna > .texto--seb-subtitulo {
  font-size: 32px;
  margin-bottom: 10px;
}

/*
 * A `organization__description`, alcançada como **o parágrafo depois do título**: 20px é o
 * degrau, e daqui vem só o espaço até os cartões. O seletor precisa do `+` porque o fecho da
 * coluna usa o mesmo degrau -- sem ele, esta regra casaria os dois e o espaço só não vazaria
 * por ordem de cascata.
 */
.pagina--learning > .coluna > .texto--seb-subtitulo + .texto--seb-texto {
  margin-bottom: 62px;
}

/*
 * O `text-about`, alcançado como **o parágrafo depois dos cartões** -- os dois parágrafos da
 * coluna usam o mesmo degrau com tamanhos diferentes, e "depois dos cartões" é o que os separa
 * sem depender de ele ser o último bloco que a coluna terá para sempre. Ele não é
 * `seb-subtitulo`, que é o degrau desses 28px, porque aquele emite `<h3>` e isto é prosa; ver
 * `backend/montagem/learning.py`.
 *
 * **`width: 100%` não é redundante ao lado do `margin: 0 auto`, e sem ele o parágrafo
 * encolhe.** A `.coluna` da D2 é `flex-direction: column`, e numa coluna flex a margem
 * automática no eixo transversal desliga o `stretch` -- o bloco passa a ter a largura do
 * conteúdo. É o mesmo achado que a G7 registrou na grade de logos.
 */
.pagina--learning > .coluna > [data-aos] ~ .texto--seb-texto {
  font-size: 28px;
  line-height: 36px;
  max-width: 1010px;
  width: 100%;
  margin: 0 auto;
}

/*
 * As `.cards`. O `gap` e o `margin-bottom` são o que a E4 mandou para esta etapa quando
 * decidiu não criar um plugin de contêiner: `display: flex` e `justify-content: center` já
 * são o `RowPlugin` da D2, e medida em `.linha` atingiria toda linha do projeto.
 *
 * **O `align-items: center` do original não vem, e a E4 pediu que isso ficasse dito aqui
 * também:** com ele, três cartões de conteúdo desigual saem centrados e de alturas
 * diferentes. Sem ele, a linha fica no `stretch` padrão do flex e o `min-height` do cartão
 * passa a ser piso -- os três crescem juntos, que é o que a altura fechada do original
 * entregava.
 *
 * **E não há regra de celular aqui**, ao contrário do original, que põe o contêiner em
 * `flex-direction: column`: no celular o `.cartao` da E4 é `width: 100%` com teto de 340px, e
 * o `flex-wrap` que a `linha` já declara os quebra. O `gap: 18px` passa a valer entre as
 * fileiras.
 *
 * Sem escopo de faixa, como as regras dos tópicos: `linha--center` é a única desta página, e
 * é ela que identifica o contêiner.
 */
.pagina--learning .linha--center {
  gap: 18px;
  margin-bottom: 42px;
}

/* --------------------------------------------------------------------- o "o que permite"
 *
 * `.wrapper__about`: a foto à esquerda e a coluna de título+texto.
 */
.pagina--learning > .linha:has(> .coluna) {
  flex-wrap: nowrap;
  align-items: center;
  gap: 62px;
  margin-bottom: 62px;
}

.pagina--learning > .linha:has(> .coluna) > [data-aos] {
  max-width: 661px;
  width: 100%;
}

.pagina--learning > .linha:has(> .coluna) > [data-aos] .imagem {
  display: block;
  width: 100%;
}

.pagina--learning > .linha:has(> .coluna) > .coluna {
  max-width: 325px;
}

/* O `about__title`: 44/46px em Manrope, que é fonte e peso do plugin -- daqui vai o tamanho. */
.pagina--learning > .linha:has(> .coluna) .texto--seb-subtitulo {
  font-size: 44px;
  line-height: 46px;
  margin-bottom: 32px;
}

/* O `about__text`: 24/30px contra os 20 do degrau. */
.pagina--learning > .linha:has(> .coluna) .texto--seb-texto {
  font-size: 24px;
  line-height: 30px;
}

/* --------------------------------------------------------------------- a lista
 *
 * `.wrapper__list`: as 7 marcas, o título com os 7 tópicos e a foto do fim.
 *
 * O recuo de 257px é o lugar que as marcas ocupavam: 232px de largura mais os 25 de
 * `margin-right` que o original dá à coluna delas.
 */
.pagina--learning > .linha:has(.topicos) {
  position: relative;
  flex-wrap: nowrap;
  align-items: flex-start;
  padding-left: 257px;
}

/*
 * **As 7 marcas decorativas, como fundo.** No original são 7 `<img>` de
 * `line-learning-2.svg` numa coluna com `gap: 19px`, cada uma 232x35 e todas com
 * `alt="Linha indicativa"`. Decoração pura não é caixa de editor -- é a regra que a G7
 * aplicou ao grafismo de parcerias --, e 7 delas não caberiam no campo da E2, que conta até 3
 * e desenha outro desenho (o "L").
 *
 * O ladrilho tem a altura do passo (35 da marca + 19 do respiro = 54px) e o desenho fica
 * **centrado** nele, porque este SVG não declara `preserveAspectRatio="none"`: ele cabe no
 * ladrilho preservando a proporção. Daí o `background-position` de -9.5px, que é meia sobra --
 * sem ele a primeira marca sairia 9.5px abaixo do lugar. A altura de 359px são os 7 passos
 * menos o último respiro, e é ela que impede o `repeat-y` de desenhar a oitava.
 */
.pagina--learning > .linha:has(.topicos)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 98px;
  width: 232px;
  height: 359px;
  background-image: url('../../icones/line-learning-2.svg');
  background-repeat: repeat-y;
  background-position: 0 -9.5px;
  background-size: 232px 54px;
  pointer-events: none;
}

/* O `.list__content`, no envelope de animação -- no original a animação é dele, e não da foto. */
.pagina--learning > .linha:has(.topicos) > [data-aos]:has(.coluna) {
  max-width: 357px;
  width: 100%;
  margin-top: 16px;
}

/* O `list__title`: 42px em Manrope, e o degrau `seb-subtitulo` é o que emite o `<h3>`. */
.pagina--learning > .linha:has(.topicos) .texto--seb-subtitulo {
  font-size: 42px;
  margin-bottom: 24px;
}

/*
 * Os tópicos da E6, nas quatro medidas em que esta lista difere das outras 26.
 *
 * **Estas quatro regras não são escopadas pela faixa**, ao contrário do resto da folha: elas
 * ajustam o componente, e não a caixa em volta dele. A lista é uma só na página, e um
 * `> .linha:has(.topicos)` na frente só acrescentaria especificidade sobre o componente sem
 * dizer nada de novo.
 *
 * `gap: 18px` contra os 8px do componente.
 *
 * E `margin-top: 0` **não é enfeite, e o caso é o primeiro do projeto:** o `base.css` copia o
 * reset do original, que zera `padding-inline-start` e `margin-bottom` do `<ul>` e **deixa o
 * `margin-top: 1em`** do navegador. No original isso não aparece -- a lista é irmã do título
 * num bloco normal, e os 16px dela colapsam com os 24 do título. Aqui os dois são itens de
 * uma `.coluna`, que é `display: flex`, e margem de item flex **não colapsa**. Sem esta linha
 * a lista desce 16px. Fica registrado para a G13: o lugar disso talvez seja o componente da
 * E6.
 */
.pagina--learning .topicos {
  gap: 18px;
  margin-top: 0;
}

/*
 * A tipografia é a do original, e não a do componente (18/26px): lá o `<li>` não declara nem
 * tamanho nem entrelinha, então ele é o Arial 16px do `body` com `line-height: normal`. É a
 * mesma classe de desvio que o conduta registrou na prosa -- quem manda é o original, porque
 * o aceite da etapa é a comparação lado a lado, e a escala fica para a G13.
 */
.pagina--learning .topicos__item {
  font-size: 16px;
  line-height: normal;
}

/*
 * O `top` da bolinha acompanha a entrelinha, como o componente já faz no celular: numa linha
 * de ~18px, o centro de uma bolinha de 8px cai a 5px do topo.
 *
 * **E a cor é a que o original dá a este marcador**, com a bolinha aparecendo nos dois
 * tamanhos -- no original ela existe **só no celular**: o `main.css` desenha o `li::before`
 * dentro do `@media`, e o reset global de `ul` tira o marcador nativo do desktop. Uma lista
 * com marcador no celular e sem marcador no desktop não é decisão, é esquecimento; o
 * componente da E6 desenha a bolinha sempre, e é isso que fica. Registrado na entrada da G8.
 */
.pagina--learning .topicos__item::before {
  top: 5px;
  background-color: var(--seb-azul-claro);
}

/* A foto do fim (`.cover4`). */
.pagina--learning > .linha:has(.topicos) > [data-aos]:has(.imagem) {
  width: 610px;
  margin-left: auto;
  margin-top: 24px;
}

.pagina--learning > .linha:has(.topicos) > [data-aos]:has(.imagem) .imagem {
  display: block;
  width: 100%;
}

@media (max-width: 768px) {
  .pagina--learning {
    padding-top: 10px;
    padding-bottom: 0;
  }

  /*
   * O banner empilha com a foto **em cima**, que é a ordem do documento -- aqui não há o
   * `column-reverse` que a G6 precisou, porque lá a foto vinha depois do texto no original.
   */
  .pagina--learning > .banner {
    gap: 32px;
    margin-bottom: 42px;
  }

  .pagina--learning > .banner .banner__imagem {
    width: 82%;
    margin-left: auto;
    margin-right: 0;
  }

  .pagina--learning > .banner .banner__conteudo {
    padding-right: 0;
    margin-left: 16px;
    margin-right: 16px;
    width: calc(100% - 32px);
  }

  .pagina--learning > .banner .banner__titulo {
    font-size: 42px;
    line-height: 24px;
    margin-left: 12px;
  }

  /*
   * Os mesmos 19px do desktop, medidos aqui: a segunda linha do original mede 40px contra os
   * 24 da entrelinha, e a caixa do script de 102px é o que a faz crescer.
   */
  .pagina--learning > .banner .banner__destaque {
    font-size: min(102px, 30vw);
    line-height: 24px;
    padding-bottom: 16px;
  }

  .pagina--learning > .banner .banner__descricao {
    font-size: 20px;
    line-height: 23px;
    margin-bottom: 20px;
  }

  .pagina--learning > .banner .texto--seb-texto {
    line-height: 22px;
  }

  /*
   * A prosa: o `wrap` volta, e a foto sobe. No original ela é o `<img class="cover2--is-mobile">`
   * solto **antes** desta faixa, e aqui é a mesma imagem com `order: -1` -- uma construção,
   * como a E1 fez com o título duplicado. Ver `backend/montagem/learning.py`.
   */
  .pagina--learning > .linha:has(> .bloco-sobre) {
    flex-wrap: wrap;
    margin-bottom: 60px;
  }

  .pagina--learning > .linha:has(> .bloco-sobre) > .bloco-sobre {
    max-width: none;
  }

  /* O "L" do celular, que no original é o par de `<div>` de 16x1 e 1x124. */
  .pagina--learning > .linha:has(> .bloco-sobre) .bloco-sobre__linha {
    top: 0;
    width: 17px;
    height: 124px;
  }

  /* 17px da linha mais os 16 que no original são o `gap` da faixa. */
  .pagina--learning > .linha:has(> .bloco-sobre) .bloco-sobre__conteudo {
    padding-top: 0;
    padding-left: 33px;
    padding-right: 16px;
  }

  .pagina--learning > .linha:has(> .bloco-sobre) .texto--seb-texto {
    font-size: 18px;
    line-height: 21px;
    margin-bottom: 16px;
  }

  /*
   * As duas `text-2` seguem em 16px: o original não as muda no celular, e o degrau
   * `seb-texto-pequeno` cai para 14 ali.
   */
  .pagina--learning > .linha:has(> .bloco-sobre) .texto--seb-texto-pequeno {
    font-size: 16px;
  }

  .pagina--learning > .linha:has(> .bloco-sobre) > [data-aos] {
    order: -1;
    flex: 0 0 100%;
    max-width: none;
    margin-left: 0;
    margin-bottom: 32px;
  }

  /* A faixa de 200px que o original recorta do alto da foto. */
  .pagina--learning > .linha:has(> .bloco-sobre) > [data-aos] .imagem {
    height: 200px;
    object-fit: cover;
    object-position: top center;
  }

  .pagina--learning > .coluna > .texto--seb-subtitulo {
    font-size: 28px;
    line-height: 28px;
  }

  .pagina--learning > .coluna > .texto--seb-subtitulo + .texto--seb-texto {
    font-size: 18px;
    line-height: 23px;
    margin-bottom: 42px;
  }

  /*
   * `box-sizing: border-box` local, como o `header.css` já faz: o reset deste site não tem
   * border-box global (decisão registrada no `base.css`), e sem isto o `width: 100%` do
   * desktop somaria os 32px de recuo e o parágrafo sairia 32px mais largo que a coluna --
   * com uma linha de texto a menos que o original.
   */
  .pagina--learning > .coluna > [data-aos] ~ .texto--seb-texto {
    box-sizing: border-box;
    font-size: 18px;
    line-height: 23px;
    padding-left: 16px;
    padding-right: 16px;
  }

  /*
   * `flex-direction: column`, como no original -- e não o `wrap` das outras duas faixas,
   * porque aqui o `align-items: center` do desktop continua valendo e é ele que centra a
   * coluna do texto: com 325px de teto numa tela de 375, ela sobra 25px de cada lado. Medido
   * no original, a 375px.
   */
  .pagina--learning > .linha:has(> .coluna) {
    flex-direction: column;
    gap: 32px;
    margin-bottom: 42px;
  }

  /* A foto encosta na borda esquerda: é o `margin-right: auto` que vence o `align-items`. */
  .pagina--learning > .linha:has(> .coluna) > [data-aos] {
    flex: 0 0 auto;
    width: 92%;
    max-width: none;
    margin-right: auto;
  }

  /* O teto de 325px do desktop fica, e é ele que manda -- a faixa disponível é 343. */
  .pagina--learning > .linha:has(> .coluna) > .coluna {
    flex: 0 0 auto;
    width: calc(100% - 32px);
  }

  .pagina--learning > .linha:has(> .coluna) .texto--seb-subtitulo {
    font-size: 32px;
    line-height: 32px;
    margin-bottom: 20px;
  }

  .pagina--learning > .linha:has(> .coluna) .texto--seb-texto {
    font-size: 18px;
    line-height: 23px;
  }

  /* A lista: **sem as marcas**, como no original -- lá a coluna delas é `display: none`. */
  .pagina--learning > .linha:has(.topicos) {
    flex-wrap: wrap;
    padding-left: 0;
  }

  .pagina--learning > .linha:has(.topicos)::before {
    content: none;
  }

  .pagina--learning > .linha:has(.topicos) > [data-aos]:has(.coluna) {
    flex: 0 0 calc(100% - 32px);
    max-width: none;
    margin-top: 0;
    margin-left: 16px;
    margin-right: 16px;
  }

  .pagina--learning > .linha:has(.topicos) .texto--seb-subtitulo {
    font-size: 32px;
    line-height: 30px;
    padding-left: 16px;
  }

  .pagina--learning .topicos {
    gap: 16px;
  }

  /*
   * A foto do fim desce para depois da lista, que é onde o original põe o
   * `<img class="cover4--is-mobile">` -- e aqui basta o `wrap`, porque ela já vem depois na
   * ordem do documento.
   */
  /*
   * Os 32px são o `padding-bottom` que o original dá à faixa -- lá a foto está **fora** dela,
   * e aqui está dentro. Como `margin-top` da foto, o espaço cai no mesmo lugar e a página não
   * ganha uma sobra no fim.
   */
  .pagina--learning > .linha:has(.topicos) > [data-aos]:has(.imagem) {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 32px;
  }

  .pagina--learning > .linha:has(.topicos) > [data-aos]:has(.imagem) .imagem {
    height: 260px;
    object-fit: cover;
  }
}

@media (min-width: 768.02px) and (max-width: 1199px) {
  .pagina--learning > .linha:has(> .bloco-sobre) .bloco-sobre__linha {
    width: clamp(95px, 100% - 380px, 235px);
  }

  .pagina--learning > .linha:has(> .bloco-sobre) .bloco-sobre__conteudo {
    padding-left: clamp(120px, 100% - 355px, 260px);
  }

  .pagina--learning > .linha:has(> .bloco-sobre) > [data-aos] {
    flex: 0 0 40%;
  }

  .pagina--learning > .linha:has(> .coluna) > .coluna {
    flex: 0 0 min(341px, 42%);
    max-width: none;
    padding-right: 16px;
  }

  .pagina--learning > .linha:has(> .coluna) .texto--seb-subtitulo {
    font-size: 32px;
    line-height: 36px;
  }
}