.single-portfolio .site-main{
    background: var(--c-surface);
    overflow: hidden;
}

.single-portfolio .page-hero__title{
    max-width: 17ch;
}

.single-portfolio .page-hero__text{
    max-width: 49ch;
}

/* ==========================================================================
   Portfólio — template único dos três pilares
   ========================================================================== */

/* --- Seletor de pilares ---------------------------------------------------- */

/* A faixa senta na base do banner: sobe a altura de uma aba inteira e deixa
   só um fio abaixo da foto.

   A subida sai da própria altura da aba em vez de ser um número solto — no
   desktop dá os -120px do design, e quando as abas encolhem no mobile a
   sobreposição encolhe junto, sem uma segunda regra para manter em dia. */
.pillar-nav {
  --tab-height: 126px;
  /* altura da aba, do Figma */
  --pillar-nav-drop: 0px;
  /* o que sobra da faixa abaixo do banner */

  position: relative;
  z-index: 2;
  margin-top: calc(var(--pillar-nav-drop) - var(--tab-height));
}

/* Numa janela baixa o banner encolhe (92svh) e o parágrafo dele desce junto.
   A faixa então sobe menos: melhor perder um pouco da sobreposição que
   encostar no texto do hero. */
@media (max-height: 700px) {
    .pillar-nav {
        --pillar-nav-drop: 56px;
    }
}

/* A faixa é mais estreita que a coluna de conteúdo: 1270px é a largura de
   bloco do design — a mesma da imagem em pílula do statement. Medida contra o
   Figma pela razão entre a faixa e o menu, que não depende da escala do
   print: 2,02 lá, e 2,37 quando a faixa ocupava o container inteiro. */
.pillar-nav__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    max-width: 1270px;
    margin-inline: auto;
}

.pillar-nav__item a {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--tab-height);
    padding: var(--space-6) var(--space-8);
    background: var(--c-white);
    border: 1px solid rgba(217, 217, 217, .3);
    font-family: var(--font-sans);
    font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem);
    /* 18 → 24px */
    font-weight: var(--fw-medium);
    line-height: 1.5;
    color: var(--c-blue);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
}

/* As três abas formam uma faixa contínua: só as pontas arredondam. */
.pillar-nav__item:first-child a {
    border-start-start-radius: var(--radius-card);
    border-end-start-radius: var(--radius-card);
}

.pillar-nav__item:last-child a {
    border-start-end-radius: var(--radius-card);
    border-end-end-radius: var(--radius-card);
}

.pillar-nav__item img {
    width: 47px;
    height: auto;
    flex-shrink: 0;
}

.pillar-nav__item.is-current a {
    background: var(--c-blue);
    border-color: var(--c-blue);
    color: var(--c-surface);
    box-shadow: 0 8px 40px rgba(129, 168, 254, .4);
}

.pillar-nav__item.is-current a:focus-visible {
    outline: 2px solid var(--c-white);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--c-blue), 0 0 0 6px var(--c-white);
}

/* O ícone do item ativo é o mesmo SVG azul: inverte para ficar legível. */
.pillar-nav__item.is-current img {
    filter: brightness(0) invert(1);
}

.pillar-nav__item:not(.is-current) a:hover {
    background: var(--c-surface);
    box-shadow: 0 8px 24px rgba(0, 62, 197, .10);
}

/* Escondido no desktop: no mobile troca de lugar com a faixa de abas — ver
   abaixo —, mostrando só o pilar corrente. */
.pillar-nav__toggle {
    display: none;
}

@media (max-width: 760px) {

    /* A faixa de abas deixa de existir como tal: vira o botão-pílula do
       pilar corrente (pillar-nav__toggle), que abre a lista dos outros
       pilares por cima do conteúdo em vez de empurrá-lo — o
       .is-open é aplicado pelo main.js. */
    .pillar-nav {
        --tab-height: 64px;
    }

    .pillar-nav__toggle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-4);
      min-height: var(--tab-height);
      margin-inline: auto;
      padding: var(--space-3) var(--space-6);
      border-radius: 20px;
      background: var(--c-blue);
      color: var(--c-white);
      font-family: var(--font-sans);
      font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem);
      font-weight: var(--fw-medium);
      line-height: 1.5;
      box-shadow: 0 8px 40px rgba(129, 168, 254, .4);
    }

    .pillar-nav__toggle img {
        width: 32px;
        height: auto;
        flex-shrink: 0;
        filter: brightness(0) invert(1);
    }

    .pillar-nav__chevron {
        width: 14px;
        height: auto;
        flex-shrink: 0;
        margin-inline-start: var(--space-2);
        transition: transform var(--dur) var(--ease);
    }

    .pillar-nav__toggle[aria-expanded="true"] .pillar-nav__chevron {
        transform: rotate(180deg);
    }

    /* Painel flutuante por cima do conteúdo, como o menu mobile do header
       (site-nav, em layout.css) — o mesmo motivo: não empurrar a página. */
    .pillar-nav__list {
        display: flex;
        flex-direction: column;
        position: absolute;
        inset: calc(100% + var(--space-3)) var(--gutter) auto;
        max-width: none;
        background: var(--c-white);
        border-radius: 20px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
    }

    .pillar-nav__list.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .pillar-nav__item a {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .pillar-nav__item:first-child a {
        border-radius: 0;
        border-top: 0;
    }

    .pillar-nav__item:last-child a {
        border-radius: 0;
    }
}


/* --- Frase de abertura ----------------------------------------------------- */

.statement {
    text-align: center;
    position: relative;
}

.statement.statement__has-supporting-image {
  padding-bottom: 0;
}

.statement .portfolio__watermark {
  top: 50px;
}

/* Sem imagem de apoio, o resumo usa a mesma escala do layout com imagem e a
   seção fecha mais perto do botão. O título mantém a escala do Figma. */
.statement:not(.statement__has-supporting-image) {
  padding-bottom: clamp(var(--space-8), 4vw, var(--space-12));
}

.statement:not(.statement__has-supporting-image) .statement__summary {
  font-size: clamp(1.125rem, .8rem + 1.2vw, 1.5rem);
}

.statement__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--space-8), 6vw, var(--space-16));
    margin-bottom: clamp(var(--space-6), 4vw, var(--space-10));
}

.statement__logo {
    width: auto;
    max-height: 110px;
    object-fit: contain;
}

.statement__title {
    max-width: 18ch;
    margin-inline: auto;
    margin-bottom: var(--space-16);
    /* No Figma chega a 134px; escala com a viewport para não estourar. */
    font-size: clamp(2.5rem, 1.25rem + 6vw, 8.4rem);
    line-height: 1.06;
    letter-spacing: -.02em;
}

/* Com um resumo logo abaixo, o título fecha mais perto dele; é o resumo que
   passa a abrir o espaço maior antes da imagem. */
.statement__title:has(~ .statement__summary) {
    margin-bottom: var(--space-6);
}

/* Texto de apoio abaixo do .statement__title. */
.statement__text {
    max-width: 40ch;
    margin-inline: auto;
    margin-bottom: var(--space-16);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.25rem + 1.2vw, 3rem);
    font-weight: var(--fw-light);
    line-height: 1.4;
    color: var(--c-blue);
}

.statement__group:has(.statement__supporting-image) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    text-align: left;
    position: relative;
    z-index: 1;
    /* Em vw (não em px fixo): a coluna do título (60% disto) precisa encolher
       na mesma proporção da viewport, senão o título — que também escala em
       vw — quebra a linha num ponto diferente a cada largura, até empilhar em
       900px. */
    padding-right: clamp(0px, 13vw, 200px);
}

.statement__group:has(.statement__supporting-image) .statement__content {
  padding-block: 30px;
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.statement__group:has(.statement__supporting-image) .statement__supporting-image {
  width: 40%;
  margin-bottom: -130px;
}

.statement__group:has(.statement__supporting-image) .statement__supporting-image img {
  width: 100%;
}

.statement__group:has(.statement__supporting-image) .statement__title {
    max-width: none;
    margin-inline: 0;
    margin-bottom: 0;
    text-align: left;
    font-size: clamp(2.25rem, .8rem + 3.47vw, 4.5rem);
}

.statement__group:has(.statement__supporting-image) .statement__summary {
  color: var(--c-ink);
  width: 100%;
  max-width: none;
  margin-bottom: 0;
  font-size: clamp(1.125rem, .8rem + 1.2vw, 1.5rem);
}

.statement__summary {
    max-width: 40ch;
    margin-inline: auto;
    margin-bottom: var(--space-16);
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 1.25rem + 1.2vw, 3rem);
    font-weight: var(--fw-light);
    line-height: 1.3;
    color: var(--c-blue);
}

.statement__mark img{
    display: inline-block;
    width: .74em;
    height: auto;
}

/* Floreio decorativo ao fim das frases de abertura (do pilar e, no Modelo 02,
   também da marca): a mesma marca gráfica da logo do site, aqui só como
   ornamento tipográfico. */
.statement__mark {
    display: inline-block;
    margin-inline-start: .15em;
    font-size: .875em;
    vertical-align: middle;
    margin-left: 0;
}

/* A imagem entra em formato de pílula, como no design. */
.statement__image-container {
  margin: 0 auto;
  max-width: 1270px;
  position: relative;
}
.statement__image-container .statement__supporting-image-mobile {
  display: none;
  max-width: 230px;
  position: absolute;
  top: -40px;
  right: 0;
  z-index: 1;
}
.statement__image {
    width: 100%;
    aspect-ratio: 1270 / 500;
    object-fit: cover;
    border-radius: clamp(30px, 18vw, 300px);
}

/* Com imagem de apoio, o layout lado a lado (60%/40%, sangria de 200px e
   imagem sobreposta com margin negativa) não cabe em telas estreitas — empilha
   e volta a centralizar, como o statement sem imagem já faz. */
@media (max-width: 1200px) {
    .statement__group:has(.statement__supporting-image) {
        flex-direction: column;
        text-align: center;
        padding-right: 0;
    }

    .statement__group:has(.statement__supporting-image) .statement__content {
        align-items: center;
        width: 100%;
    }

    .statement__group:has(.statement__supporting-image) .statement__title,
    .statement__group:has(.statement__supporting-image) .statement__summary {
        text-align: center;
    }

    .statement__group:has(.statement__supporting-image) .statement__supporting-image {
        width: 100%;
        margin-bottom: 0;
        display: none;
    }
    .statement__image-container .statement__supporting-image-mobile {
        display: block;
    }
    .statement__logo {
        max-height: 60px;
    }
}

@media (max-width: 700px) {
  .statement__image {
    aspect-ratio: 700 / 447;
  }
  .statement__image-container .statement__supporting-image-mobile {
    max-width: 200px;
  }
    .statement__logo {
        max-height: 45px;
    }
}

@media (max-width: 480px) {
  .statement__image-container .statement__supporting-image-mobile {
    max-width: 120px;
  }
}

/* --- Bloco de marca -------------------------------------------------------- */

.brand-block {
    padding-bottom: clamp(var(--space-16), 7vw, var(--space-24));
}

.brand-block__inner {
    display: grid;
    grid-template-columns: minmax(280px, 625px) 1fr;
    align-items: center;
    gap: clamp(var(--space-8), 5vw, var(--space-24));
}

/* Blocos alternados trocam o lado do texto sem mudar a ordem no HTML. */
.brand-block--flipped .brand-block__text {
    order: 2;
}

.brand-block--flipped .brand-block__media {
    order: 1;
}

.brand-block--flipped .brand-block__media__gallery {
    order: 1;
}

.brand-block__text {
    display: grid;
    gap: var(--space-6);
    justify-items: start;
}

.brand-block__headline {
    font-size: clamp(1.5rem, 1.2rem + 2vw, 2.5rem);
    /* 28 → 50px */
    line-height: 1.3;
}

.brand-block__sub {
    border-bottom: 1px solid var(--c-border);
    width: 100%;
    max-width: 571px;
    font-size: var(--fs-lead);
    font-weight: var(--fw-medium);
    line-height: var(--lh-lead);
    color: var(--c-ink);
    padding-bottom: var(--space-6);
}

.brand-block__body {
    max-width: 44ch;
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--c-ink);
}

/* --- Mídia do bloco -------------------------------------------------------- */

.brand-block__media {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-16);
    margin-left: -5%;
}

.brand-block__image {
    width: 100%;
    object-fit: cover;
}

.brand-block__media__gallery{
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

/* --- Modelo 01: texto + duas imagens ---------------------------------------
   Texto e produtos ficam dentro do container padrão do site. A imagem de
   apoio é a única que foge dele: divide a linha com o container, sem gutter
   do lado direito, por isso fica sempre encostada na borda da tela — ainda
   assim é um item de fluxo normal (nunca position: absolute), que só
   encolhe — via clamp() — conforme a viewport diminui, sem recorte nem
   sobrepor outro elemento. No mobile a linha empilha e ela volta a ter a
   margem padrão do site. */
.brand-block--split .brand-block__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow: hidden;
}

.brand-block--split .brand-block__inner {
    flex: 1 1 480px;
    min-width: 0;
}

.brand-block__products-image {
    width: 25vw;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.brand-block__supporting {
    flex: 0 1 clamp(140px, 25vw, 600px);
    width: clamp(140px, 25vw, 600px);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-card);
}

/* Blocos sem nenhuma imagem ocupam a largura toda em vez de deixar metade do
   grid vazia — acontece quando a marca ainda não tem mídia (Modelo 01 e 02:
   image/products-image; Modelo 03: a galeria). */
.brand-block__inner:not(:has(.brand-block__image)):not(:has(.brand-block__products-image)):not(:has(.brand-block__gallery-image)) {
    grid-template-columns: minmax(0, 900px);
    justify-content: center;
    text-align: center;
}

.brand-block__inner:not(:has(.brand-block__image)):not(:has(.brand-block__products-image)):not(:has(.brand-block__gallery-image)) .brand-block__text {
    justify-items: center;
}

.brand-block__inner:not(:has(.brand-block__image)):not(:has(.brand-block__products-image)):not(:has(.brand-block__gallery-image)) .brand-block__body {
    margin-inline: auto;
}

/* --- Faixa de ação ----------------------------------------------------------
   O botão fecha o bloco numa linha só, abaixo de tudo — texto e as duas
   colunas de mídia —, igual nos dois modelos. */
.brand-block__cta {
    margin-top: clamp(var(--space-8), 4vw, var(--space-12));
    text-align: center;
}

/* --- Modelo 02: visual de abertura + título ---------------------------------
   A imagem de abertura ocupa o bloco em largura cheia; a descrição vira um
   título grande centralizado, como uma frase de abertura da própria marca.
   Abaixo, uma faixa compacta — sem o parágrafo de corpo, já usado no título —
   junta a imagem de apoio ao título e ao destaque. O botão vem depois, na
   faixa de ação comum aos dois modelos (.brand-block__cta). */
.brand-block__hero-image {
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 0 auto clamp(var(--space-10), 6vw, var(--space-16)) auto;
}

.brand-block__statement {
    display: block;
    max-width: 27ch;
    margin-inline: auto;
    margin-bottom: clamp(var(--space-10), 6vw, var(--space-16));
    text-align: center;
    font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem);
    line-height: 1.15;
    letter-spacing: -.01em;
}

/* Imagem de abertura full-bleed do Modelo 05: foge do container e ocupa a
   largura da viewport inteira (o Modelo 04 tem a mesma ideia, mas em CSS
   próprio — ver assets/css/brand-spotlight.css). :has() liga o
   overflow-x: hidden automaticamente em qualquer bloco que use essa
   classe, pra conter a sangria da margin-left negativa sem abrir barra de
   rolagem horizontal na página. */
.brand-block:has(.brand-block__bleed-image) {
    overflow-x: hidden;
}

.brand-block__bleed-image {
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-bottom: clamp(var(--space-10), 6vw, var(--space-16));
    aspect-ratio: 7 / 2;
    object-fit: cover;
}

@media (max-width: 600px) {
    .brand-block__bleed-image {
        aspect-ratio: 1 / 0.6;
    }
}

.brand-block--showcase .brand-block__inner {
    max-width: 100%;
}

.brand-block--showcase .brand-block__inner .brand-block__sub{
    border-bottom: none;
}

/* Acima do breakpoint de empilhamento, a faixa perde o padding esquerdo: a
   imagem encosta na borda da tela e só o texto fica alinhado com o container
   padrão, à direita — a coluna da imagem encolhe (minmax acima) conforme a
   viewport diminui, até empilhar. */
@media (min-width: 1201px) {
    .brand-block--showcase .brand-block__inner {
        grid-template-columns: minmax(420px, 50vw) 1fr;
        padding-right: var(--gutter);
        padding-left: 0;
    }

    /* margin-left: -5% em .brand-block__media é o truque de sangria do
       Modelo 01, onde o container ainda tem padding dos dois lados. Aqui o
       padding já foi zerado acima, então a mesma margem só empurraria a
       imagem para fora da tela. */
    .brand-block--showcase .brand-block__media {
        margin-left: -12%;
    }
}

@media (min-width: 1601px) {
    .brand-block--showcase .brand-block__inner {
        padding-right: calc((100vw - var(--container)) / 2);
    }
}

/* --- Modelo 03: texto + galeria de duas imagens -----------------------------
   Mesma grade de texto + mídia do Modelo 01; as duas imagens fixas viram uma
   galeria de duas fotos lado a lado, do mesmo tamanho. */
.brand-block__gallery-image {
    flex: 1 1 0;
    width: calc(50% - var(--space-8));
    aspect-ratio: 1 / 1.09;
    object-fit: cover;
    border-radius: var(--radius-card);
}

/* --- Modelo 04 (marca "spotlight") -----------------------------------------
   CSS próprio, isolado, em assets/css/brand-spotlight.css — não reaproveita
   as classes acima. */

/* --- Modelo 05: abertura full-bleed + texto e produto agrupado -------------
   Mesma faixa de texto + mídia do Modelo 01 (.brand-block__row/__inner/
   __text/__media), sem a imagem de apoio: o produto agrupado ocupa a coluna
   toda, em vez de dividi-la com ela, e por isso não precisa mais do truque
   de sangria (-5%) que empurra a dupla de imagens pra borda da tela. */
.brand-block--hero .brand-block__media {
    margin-left: 0;
}

/* O Modelo 05 mantém sempre texto à esquerda e produto à direita, como no
   anexo de referência — ao contrário dos Modelos 01 e 03, não alterna de
   lado em blocos ímpares. */
.brand-block--hero.brand-block--flipped .brand-block__text {
    order: initial;
}

.brand-block--hero.brand-block--flipped .brand-block__media {
    order: initial;
}

.brand-block--hero .brand-block__products-image {
    width: 100%;
    max-width: 640px;
}

@media (max-width: 1200px) {
    .brand-block--hero .brand-block__products-image {
        width: 50%;
        max-width: none;
    }
}

@media (max-width: 600px) {
    .brand-block--hero .brand-block__products-image {
        width: 100%;
    }
}

@media (max-width: 1400px) {
    .brand-block__inner{
        grid-template-columns: minmax(280px, 480px) 1fr;
    }
}

@media (max-width: 1200px) {
    .brand-block__inner {
        grid-template-columns: 1fr;
    }

    .brand-block--flipped .brand-block__text,
    .brand-block--flipped .brand-block__media {
        order: 0;
    }

    .brand-block--flipped .brand-block__media{
        flex-direction: column;
    }

    .brand-block__text{
        justify-items: center;
        text-align: center;
    }

    .brand-block__sub,
    .brand-block__body{
        max-width: 100%;
    }

    .brand-block__products-image{
        width: 50%;
    }

    .brand-block--split .brand-block__row {
        flex-direction: column;
        align-items: stretch;
    }

    .brand-block__supporting {
        flex-basis: auto;
        width: 50%;
    }

    .brand-block__media{
        gap: var(--space-8);
        margin-left: 0;
    }

    .brand-block__media__gallery{
        gap: var(--space-8);
        margin-left: 0;
    }
}

@media (max-width: 600px) {

    .brand-block__media{
        flex-direction: column;
    }

    .brand-block__products-image{
        width: 90%;
    }

    .brand-block__supporting {
        width: 100%;
    }

    .brand-block__media__gallery{
        gap: var(--space-4);
    }
    .brand-block__gallery-image {
        width: calc(50% - var(--space-4));
    }
}

/* ==========================================================================
   Portfólio — bloco de marca, Modelo 04 ("spotlight", ex.: Emtrix).

   CSS isolado deste layout: título + imagem full-bleed, depois texto e
   galeria de duas fotos lado a lado. Não reaproveita as classes .brand-
   block__inner/__text/__sub/__media__gallery dos outros modelos — só a
   classe raiz .brand-block--spotlight, que brand-block.php já aplica no
   <article> para todos os modelos (é o hook do modificador de layout, não
   uma classe de conteúdo compartilhada).
   ========================================================================== */

/* Contém a sangria da imagem full-bleed (margin-left negativo) sem abrir
   barra de rolagem horizontal na página. */
.brand-block--spotlight {
    overflow-x: hidden;
}

.brand-spotlight__statement {
    display: block;
    max-width: 25ch;
    margin-inline: auto;
    margin-bottom: clamp(var(--space-8), 5vw, var(--space-12));
    text-align: center;
    font-size: clamp(2.25rem, 1.2rem + 2.5vw, 5rem);
    line-height: 1.15;
    letter-spacing: -.01em;
}

/* Foge do .container: ocupa a largura da viewport, não a do conteúdo. */
.brand-spotlight__hero {
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-bottom: clamp(var(--space-10), 6vw, var(--space-16));
    aspect-ratio: 16 / 5;
    object-fit: cover;
}

.brand-spotlight__row {
    display: grid;
    grid-template-columns: minmax(280px, 520px) 1fr;
    align-items: center;
    gap: clamp(var(--space-8), 5vw, var(--space-16));
}

.brand-spotlight__text {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
}

.brand-spotlight__headline {
    font-size: var(--fs-h3);
    line-height: 1.3;
}

.brand-spotlight__note {
    max-width: 46ch;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body);
    color: var(--c-ink);
}

.brand-spotlight__gallery {
    display: flex;
    align-items: stretch;
    gap: var(--space-8);
}

.brand-spotlight__photo {
    height: 360px;
    width: auto;
    max-width: 100%;
    aspect-ratio: 1 / 0.73;
    object-fit: cover;
    border-radius: var(--radius-card);
}

@media (max-width: 1400px) {
    .brand-spotlight__row {
        grid-template-columns: minmax(280px, 380px) 1fr;
    }
    .brand-spotlight__photo {
        height: 300px;
    }
}

@media (max-width: 1200px) {
    .brand-spotlight__row {
        grid-template-columns: 1fr;
    }

    .brand-spotlight__text {
        justify-items: center;
        text-align: center;
    }

    .brand-spotlight__note {
        margin-inline: auto;
    }

    .brand-spotlight__photo {
        width: calc(50% - var(--space-4));
        height: auto;
    }
}

@media (max-width: 600px) {
    .brand-spotlight__hero {
        aspect-ratio: 1 / 0.6;
    }
    
    .brand-spotlight__gallery{
        gap: var(--space-4);
    }

    .brand-spotlight__photo{
        width: calc(50% - var(--space-2));
    }
}