/* UNIMES redesign — Home. CSS puro, sem build. */

.unimes-redesign-home {
  /* Ritmo vertical da Home. O prototipo respira 48px no mobile e 88px no
     desktop; o token global chega a 96px, generoso demais para a sequencia de
     blocos curtos da Home. O override vale so dentro dela. */
  --unimes-space-section: clamp(3rem, 6vw, 5.5rem);
  min-width: 0;
  background: var(--unimes-color-neutral-white);
}

.unimes-home-section-heading {
  max-width: 48rem;
  margin-bottom: var(--unimes-space-8);
}

.unimes-home-section-heading :where(p, h2),
.unimes-home-vocational :where(p, h2),
.unimes-home-news-card :where(h3, p),
.unimes-home-campus-card :where(h3, p, address) {
  margin-top: 0;
}

.unimes-home-section-heading .unimes-eyebrow {
  margin-bottom: var(--unimes-space-2);
}

.unimes-home-section-heading--row {
  display: flex;
  max-width: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--unimes-space-4);
}

.unimes-home-section-heading--row .unimes-link {
  flex: 0 0 auto;
  /* Area de toque de 44px sem mover o titulo (QA final, 07/10/2026: tinha 26px). */
  padding-block: 9px;
  margin-block: -9px;
}

.unimes-home-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--unimes-color-neutral-100);
}

.unimes-home-banner__viewport,
.unimes-home-banner__slide,
.unimes-home-banner__link,
.unimes-home-banner picture {
  display: block;
  width: 100%;
}

.unimes-home-banner__slide[hidden] {
  display: none;
}

/* A arte mobile e vertical (1080x1220) e cresce com a largura, sem teto: a
   390px ela rende ~440px de altura. A desktop e larga (1920x690) e sobe ate o
   teto de 520px; dai em diante o object-fit corta topo e base, nunca as
   laterais, para o banner nao dominar telas muito largas. */
.unimes-home-banner__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 1220;
  object-fit: cover;
}

.unimes-home-banner__link {
  color: inherit;
  text-decoration: none;
}

/* A camada de controles cobre o banner inteiro; so os botoes recebem ponteiro,
   para nao roubar o clique do link da campanha. */
.unimes-home-banner__controls {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  pointer-events: none;
}

.unimes-home-banner.is-enhanced .unimes-home-banner__controls {
  display: block;
}

.unimes-home-banner__arrow,
.unimes-home-banner__indicator {
  pointer-events: auto;
  cursor: pointer;
}

/* Setas centralizadas na vertical, nas laterais. Aparecem a partir do tablet,
   como no prototipo; no celular restam os indicadores e o gesto horizontal. */
.unimes-home-banner__arrow {
  position: absolute;
  top: 50%;
  display: none;
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--unimes-radius-pill);
  background: rgb(255 255 255 / 0.92);
  color: var(--unimes-color-brand-deep);
  box-shadow: var(--unimes-shadow-md);
  transform: translateY(-50%);
}

.unimes-home-banner__arrow:hover {
  background: var(--unimes-color-neutral-white);
}

.unimes-home-banner__arrow--previous {
  left: var(--unimes-space-4);
}

.unimes-home-banner__arrow--next {
  right: var(--unimes-space-4);
}

/* Indicadores centralizados no rodape do banner, sem a pilula branca que
   escondia a arte. O deslocamento de baixo desconta o padding do botao: 2px de
   caixa mais 18px de padding colocam a bolinha a 20px da borda. */
.unimes-home-banner__indicators {
  position: absolute;
  right: 0;
  bottom: 0.125rem;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* O alvo de toque tem 44x44px; a bolinha visivel e o content-box. Ate 30/09/2026
   o padding lateral era de 4px e o alvo tinha so 16px de largura, colado ao
   vizinho (Lighthouse: alvos de toque pequenos demais). */
.unimes-home-banner__indicator {
  box-sizing: content-box;
  width: 0.5rem;
  height: 0.5rem;
  padding: 1.125rem;
  border: 0;
  border-radius: var(--unimes-radius-pill);
  background: rgb(255 255 255 / 0.55);
  background-clip: content-box;
  /* A arte e do designer e pode ser clara: a sombra garante o contorno. */
  filter: drop-shadow(0 1px 2px rgb(4 0 61 / 0.45));
  transition: width var(--unimes-transition-fast);
}

.unimes-home-banner__indicator[aria-current='true'] {
  width: 1.75rem;
  background: var(--unimes-color-neutral-white);
  background-clip: content-box;
}

/* Modalidades. Logo abaixo do banner o prototipo usa um ritmo mais curto que o
   do resto da pagina: 40px no mobile e 72px no desktop. */
.unimes-home-modalities {
  --unimes-space-section: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--unimes-color-neutral-white);
}

.unimes-home-modalities__grid,
.unimes-home-access__list,
.unimes-home-events__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.unimes-home-modalities__grid {
  display: grid;
  gap: var(--unimes-space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* No celular o cartao mostra so o icone e o rotulo, com o titulo empurrado para
   a base; o texto de apoio e a seta voltam a partir do tablet. */
.unimes-home-modality {
  display: flex;
  min-height: 7.75rem;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--unimes-space-2);
  padding: var(--unimes-space-4);
  border: 1px solid transparent;
  border-radius: var(--unimes-radius-lg);
  background: var(--surface-card);
  color: var(--text-strong);
  text-decoration: none;
  transition: box-shadow var(--unimes-transition-fast) ease,
    transform var(--unimes-transition-fast) ease;
}

.unimes-home-modality:hover {
  box-shadow: var(--unimes-shadow-md);
  transform: translateY(-2px);
}

.unimes-home-modality__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.unimes-home-modality__arrow {
  display: none;
  color: var(--text-link);
  transition: transform var(--unimes-transition-fast) ease;
}

.unimes-home-modality:hover .unimes-home-modality__arrow {
  transform: translateX(0.2rem);
}

.unimes-home-modality__title {
  font-size: var(--unimes-font-body-lg-size);
  letter-spacing: var(--unimes-font-h4-letter-spacing);
  line-height: var(--unimes-font-h4-line-height);
}

.unimes-home-modality__text {
  display: none;
  color: var(--unimes-color-neutral-700);
  font-size: var(--unimes-font-body-size);
  line-height: var(--unimes-font-body-line-height);
}

/* Tons dos cartoes, todos vindos do design system: navy de estrutura, ciano de
   destaque, branco com borda sutil e o lilas mais claro da rampa navy. A cor e
   design, entao ela vem da modalidade escolhida, nao de um campo de cor. */
.unimes-home-modality--graduacao {
  background: var(--surface-brand);
  color: var(--text-on-brand);
}

.unimes-home-modality--graduacao .unimes-home-modality__text {
  color: var(--navy-200);
}

.unimes-home-modality--pos-graduacao {
  background: var(--surface-highlight);
  color: var(--text-strong);
}

.unimes-home-modality--pos-graduacao .unimes-home-modality__text {
  color: var(--text-strong);
}

.unimes-home-modality--extensao-cursos,
.unimes-home-modality--extensao-universitaria {
  border-color: var(--border-subtle);
}

.unimes-home-modality--descontos {
  border-color: var(--navy-100);
  background: var(--surface-brand-soft);
}

.unimes-home-modality--graduacao .unimes-home-modality__arrow,
.unimes-home-modality--pos-graduacao .unimes-home-modality__arrow,
.unimes-home-modality--descontos .unimes-home-modality__arrow {
  color: inherit;
}

.unimes-home-strategic__grid {
  display: grid;
  gap: var(--unimes-space-4);
}

/* Cartao da campanha. E aqui, e so aqui na Home, que o escarlate volta: como
   grafismo de trilha da marca, atras do texto, nunca como cor de interface.
   O grafismo vem de trail.css (classe .unimes-trail no cartao). */
.unimes-home-strategic-card {
  display: flex;
  min-width: 0;
  border-radius: var(--unimes-radius-lg);
  background: var(--surface-brand);
  color: var(--text-on-brand);
}

.unimes-home-strategic-card__content {
  position: relative;
  display: flex;
  max-width: 32.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--unimes-space-3);
  padding: clamp(var(--unimes-space-6), 4vw, var(--unimes-space-10));
}

/* O selo usa o ciano vivo como fundo, com o navy por cima: sobre fundo claro
   ele continua proibido como cor de texto. */
.unimes-home-strategic-card__badge {
  margin: 0;
  padding: var(--unimes-space-1) var(--unimes-space-3);
  border-radius: var(--unimes-radius-pill);
  background: var(--unimes-color-brand-cyan);
  color: var(--text-strong);
  font-size: var(--unimes-font-caption-size);
  letter-spacing: .12em;
  line-height: var(--unimes-font-caption-line-height);
  text-transform: uppercase;
}

.unimes-home-strategic-card__content h2 {
  margin: 0;
  color: var(--text-on-brand);
}

.unimes-home-strategic-card__text {
  margin: 0;
  color: var(--navy-200);
  font-size: var(--unimes-font-body-lg-size);
  line-height: var(--unimes-font-body-lg-line-height);
}

.unimes-home-strategic-card .unimes-button {
  margin-top: var(--unimes-space-2);
}

/* Teste Vocacional: cartao claro no lilas mais suave da rampa navy, com o
   icone do tema no lugar de uma foto. */
.unimes-home-vocational {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--unimes-space-3);
  padding: clamp(var(--unimes-space-6), 3vw, var(--unimes-space-8));
  border-radius: var(--unimes-radius-lg);
  background: var(--surface-brand-soft);
}

.unimes-home-vocational__icon {
  display: none;
  color: var(--text-strong);
}

.unimes-home-vocational .unimes-eyebrow {
  margin-bottom: 0;
}

.unimes-home-vocational h2 {
  margin: 0;
}

.unimes-home-vocational__text {
  flex-grow: 1;
  margin: 0;
  color: var(--unimes-color-neutral-700);
  font-size: var(--unimes-font-body-size);
  line-height: var(--unimes-font-body-line-height);
}

.unimes-home-vocational .unimes-button {
  margin-top: var(--unimes-space-2);
}

/* Noticias e eventos dividem uma grade de tres colunas: com agenda, duas
   noticias e o painel de eventos; sem eventos futuros, tres noticias ocupam a
   linha inteira, em vez de deixar um buraco. */
.unimes-home-updates__grid {
  display: grid;
  gap: var(--unimes-space-6);
}

.unimes-home-news-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--unimes-radius-lg);
  background: var(--surface-card);
}

.unimes-home-news-card__media {
  display: block;
  height: 11.25rem;
  overflow: hidden;
  background: var(--navy-100);
  color: var(--navy-400);
}

.unimes-home-news-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--unimes-transition-slow) ease;
}

.unimes-home-news-card:hover .unimes-home-news-card__media img {
  transform: scale(1.02);
}

/* No celular so a primeira noticia mostra a imagem; as demais viram cartoes de
   texto, como no prototipo de 390, para a secao nao virar uma coluna de fotos. */
.unimes-home-news-card:not(:first-of-type) .unimes-home-news-card__media {
  display: none;
}

.unimes-home-media-fallback {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: inherit;
  align-items: center;
  justify-content: center;
  background: var(--unimes-color-neutral-100);
  color: var(--unimes-color-neutral-500);
}

.unimes-home-news-card__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--unimes-space-2);
  padding: var(--unimes-space-5);
}

/* Categoria e data no mesmo degrau do eyebrow: cinza, caixa alta e sem o
   escarlate que a categoria usava. */
.unimes-home-news-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--unimes-space-2);
  margin-bottom: 0;
  color: var(--unimes-color-neutral-500);
  font-size: var(--unimes-font-caption-size);
  font-weight: var(--fw-regular);
  letter-spacing: .12em;
  line-height: var(--unimes-font-caption-line-height);
  text-transform: uppercase;
}

.unimes-home-news-card__meta span::after {
  margin-left: var(--unimes-space-2);
  content: '·';
}

.unimes-home-news-card h3 {
  margin-bottom: 0;
  font-size: var(--unimes-font-body-lg-size);
  line-height: 1.3;
}

.unimes-home-news-card h3 a {
  /* Area de toque maior sem mudar a linha (elemento em linha; QA final, 07/10/2026). */
  padding-block: 0.6em;
  color: var(--unimes-color-brand-deep);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2rem;
  transition: text-decoration-color var(--unimes-transition-fast) ease,
    opacity var(--unimes-transition-fast) ease;
}

.unimes-home-news-card h3 a:hover {
  opacity: 0.82;
  text-decoration-color: currentColor;
}

/* O painel de eventos e a unica peca navy do miolo da Home: ele e que segura o
   contraste da faixa e separa a agenda das noticias. */
.unimes-home-events {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: var(--unimes-space-5);
  border-radius: var(--unimes-radius-lg);
  background: var(--surface-brand);
  color: var(--text-on-brand);
}

.unimes-home-events__label {
  margin-bottom: var(--unimes-space-3);
  color: var(--navy-300);
}

.unimes-home-events__list {
  display: grid;
}

.unimes-home-event {
  display: grid;
  min-width: 0;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  align-items: start;
  gap: var(--unimes-space-4);
  padding-block: var(--unimes-space-3);
  border-bottom: 1px solid rgb(255 255 255 / 0.12);
  color: var(--text-on-brand);
  text-decoration: none;
}

.unimes-home-events__list li:last-child .unimes-home-event {
  border-bottom: 0;
}

.unimes-home-event:hover .unimes-home-event__title {
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

.unimes-home-event__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

/* O dia passa dos 24px, entao segue a regra do design system e vai em Light. */
.unimes-home-event__day {
  font-size: var(--unimes-font-h3-size);
  font-weight: var(--fw-light);
  line-height: 1;
}

.unimes-home-event__month {
  margin-top: var(--unimes-space-1);
  color: var(--unimes-color-brand-cyan);
  font-size: var(--unimes-font-caption-size);
  letter-spacing: .12em;
  line-height: var(--unimes-font-caption-line-height);
  text-transform: uppercase;
}

.unimes-home-event__content {
  display: grid;
  min-width: 0;
  gap: var(--unimes-space-1);
}

.unimes-home-event__title {
  font-size: var(--unimes-font-body-sm-size);
  line-height: 1.45;
}

.unimes-home-event__place {
  color: var(--navy-300);
  font-size: var(--unimes-font-caption-size);
  line-height: var(--unimes-font-caption-line-height);
}

.unimes-home-events__all {
  margin-top: auto;
  padding-top: var(--unimes-space-4);
  color: var(--text-on-brand);
  font-size: var(--unimes-font-body-sm-size);
}

.unimes-home-empty-state {
  margin: 0;
  padding: var(--unimes-space-6);
  border: 1px solid var(--unimes-color-neutral-200);
  border-radius: var(--unimes-radius-md);
  background: var(--unimes-color-neutral-50);
  color: var(--unimes-color-neutral-700);
}

/* Bloco institucional: texto a esquerda, quatro provas a direita. */
.unimes-home-about__grid {
  display: grid;
  gap: var(--unimes-space-8);
}

.unimes-home-about__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--unimes-space-4);
}

/* Unico eyebrow em ciano da Home, no degrau escuro --cyan-700, que o design
   system indica justamente para texto sobre fundo claro. */
.unimes-home-about__eyebrow {
  margin-bottom: 0;
  color: var(--text-link);
}

.unimes-home-about__content h2 {
  margin: 0;
}

.unimes-home-about__text {
  margin: 0;
  color: var(--text-body);
  font-size: var(--unimes-font-body-lg-size);
  line-height: var(--unimes-font-body-lg-line-height);
}

.unimes-home-about__highlights {
  display: grid;
  gap: var(--unimes-space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.unimes-home-highlight {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--unimes-space-2);
  padding: var(--unimes-space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--unimes-radius-lg);
  background: var(--surface-card);
}

/* O numero passa dos 24px, entao vai em Light, como manda o design system. */
.unimes-home-highlight__value {
  color: var(--text-strong);
  font-size: var(--unimes-font-h2-size);
  font-weight: var(--unimes-font-h2-weight);
  line-height: 1;
  overflow-wrap: anywhere;
}

.unimes-home-highlight:nth-child(3) .unimes-home-highlight__value {
  color: var(--text-link);
}

.unimes-home-highlight__label {
  color: var(--unimes-color-neutral-500);
  font-size: var(--unimes-font-body-sm-size);
  line-height: var(--unimes-font-body-sm-line-height);
}

/* Acesse rapido. No celular cada servico e uma linha com icone e rotulo; do
   tablet para cima vira cartao, com descricao e chamada. */
.unimes-home-access__list {
  display: grid;
  gap: var(--unimes-space-3);
}

.unimes-home-access-card {
  display: flex;
  min-height: var(--unimes-space-control);
  align-items: center;
  gap: var(--unimes-space-4);
  padding: var(--unimes-space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--unimes-radius-lg);
  background: var(--surface-card);
  color: var(--text-strong);
  text-decoration: none;
  transition: box-shadow var(--unimes-transition-fast) ease,
    transform var(--unimes-transition-fast) ease;
}

.unimes-home-access-card:hover {
  box-shadow: var(--unimes-shadow-md);
  transform: translateY(-2px);
}

.unimes-home-access-card__icon {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--unimes-radius-md);
  background: var(--surface-brand);
  color: var(--text-on-brand);
}

.unimes-home-access-card__title {
  font-size: var(--unimes-font-body-lg-size);
  line-height: var(--unimes-font-h4-line-height);
}

.unimes-home-access-card__text {
  display: none;
  flex-grow: 1;
  color: var(--unimes-color-neutral-700);
  font-size: var(--unimes-font-body-sm-size);
  line-height: var(--unimes-font-body-sm-line-height);
}

.unimes-home-access-card__cta {
  display: none;
  align-items: center;
  gap: var(--unimes-space-2);
  color: var(--text-link);
  font-size: var(--unimes-font-body-sm-size);
}

.unimes-home-access-card:hover .unimes-home-access-card__cta svg {
  transform: translateX(0.2rem);
}

.unimes-home-access-card__cta svg {
  transition: transform var(--unimes-transition-fast) ease;
}

.unimes-home-campuses {
  background: var(--unimes-color-neutral-white);
}

.unimes-home-campuses__grid {
  display: grid;
  gap: var(--unimes-space-6);
}

.unimes-home-campus-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--unimes-radius-lg);
  background: var(--surface-card);
}

.unimes-home-campus-card__media {
  height: 11.25rem;
  overflow: hidden;
  background: var(--navy-100);
  color: var(--navy-400);
}

.unimes-home-campus-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.unimes-home-campus-card__content {
  padding: var(--unimes-space-6);
}

/* O rotulo do campus era o ultimo escarlate da interface da Home: passou ao
   mesmo cinza dos demais eyebrows. */
.unimes-home-campus-card__type {
  margin-bottom: var(--unimes-space-2);
}

.unimes-home-campus-card h3 {
  margin-bottom: var(--unimes-space-3);
  color: var(--unimes-color-brand-deep);
  font-size: var(--unimes-font-body-lg-size);
  line-height: var(--unimes-font-h4-line-height);
  overflow-wrap: anywhere;
}

.unimes-home-campus-card address,
.unimes-home-campus-card__content > p:not(.unimes-home-campus-card__type) {
  margin-bottom: var(--unimes-space-3);
  color: var(--unimes-color-neutral-700);
  font-size: var(--unimes-font-body-sm-size);
  font-style: normal;
  line-height: var(--unimes-font-body-sm-line-height);
}

/* Fecha a secao lembrando que campus e polo sao coisas diferentes. Uma linha
   so, no lilas mais claro da rampa navy, para nao competir com os cartoes. */
.unimes-home-campuses__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--unimes-space-2) var(--unimes-space-4);
  margin: var(--unimes-space-6) 0 0;
  padding: var(--unimes-space-5) var(--unimes-space-6);
  border-radius: var(--unimes-radius-lg);
  background: var(--surface-brand-soft);
  color: var(--text-strong);
  font-size: var(--unimes-font-body-lg-size);
  line-height: var(--unimes-font-body-lg-line-height);
}

.unimes-home-campuses__note-text {
  flex: 1 1 18rem;
}

.unimes-home-campuses__note-link {
  display: inline-flex;
  min-height: var(--unimes-space-control);
  align-items: center;
  font-size: var(--unimes-font-body-sm-size);
}

.unimes-home-campus-card .unimes-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  margin-top: var(--unimes-space-2);
}

@media (min-width: 768px) {
  .unimes-home-section-heading--row {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .unimes-home-banner__image {
    aspect-ratio: 1920 / 690;
    max-height: 32.5rem;
  }

  .unimes-home-banner__arrow {
    display: inline-flex;
  }

  .unimes-home-banner__arrow--previous {
    left: var(--unimes-space-8);
  }

  .unimes-home-banner__arrow--next {
    right: var(--unimes-space-8);
  }

  .unimes-home-banner__indicators {
    bottom: 0.375rem;
  }

  .unimes-home-modalities__grid {
    gap: var(--unimes-space-5);
  }

  .unimes-home-modality {
    min-height: 11rem;
    justify-content: flex-start;
    padding: var(--unimes-space-6);
  }

  .unimes-home-modality__arrow,
  .unimes-home-modality__text {
    display: block;
  }

  .unimes-home-modality__title {
    margin-top: var(--unimes-space-2);
    font-size: var(--unimes-font-h4-size);
  }

  .unimes-home-strategic-card {
    min-height: 21.25rem;
  }

  .unimes-home-vocational__icon {
    display: block;
  }

  .unimes-home-updates__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .unimes-home-news-card:not(:first-of-type) .unimes-home-news-card__media {
    display: block;
  }

  .unimes-home-news-card__content {
    padding: var(--unimes-space-6);
  }

  .unimes-home-events {
    grid-column: 1 / -1;
    padding: var(--unimes-space-6);
  }

  .unimes-home-access__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--unimes-space-4);
  }

  .unimes-home-access-card {
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--unimes-space-2);
    padding: var(--unimes-space-6);
  }

  .unimes-home-access-card__icon {
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--unimes-space-2);
  }

  .unimes-home-access-card__text,
  .unimes-home-access-card__cta {
    display: flex;
  }

  .unimes-home-campus-card__media {
    height: 13.75rem;
  }

  .unimes-home-campuses__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  /* Seis colunas: os tres primeiros ocupam duas cada e os dois ultimos, tres
     cada. Cinco cartoes fecham as duas linhas sem deixar buraco. */
  .unimes-home-modalities__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .unimes-home-modalities__grid > li {
    grid-column: span 2;
  }

  .unimes-home-modalities__grid > li:nth-child(n + 4) {
    grid-column: span 3;
  }

  .unimes-home-updates__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .unimes-home-strategic__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--unimes-space-6);
  }

  .unimes-home-about__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--unimes-space-16);
  }

  .unimes-home-highlight {
    padding: var(--unimes-space-6);
  }

  .unimes-home-strategic__grid--single {
    grid-template-columns: minmax(0, 1fr);
  }

  .unimes-home-news-card__media {
    height: 12.5rem;
  }

  .unimes-home-events {
    grid-column: auto;
  }

  .unimes-home-access__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .unimes-home-campuses__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}