.eventos-bg { padding: 80px 0; }
.eventos { display: grid; gap: 30px; }
.eventos-secao { display: grid; gap: 30px; }
.eventos-secao-anteriores { margin-top: 20px; padding-top: 40px; border-top: 1px solid #DADADA; }
.eventos-secao-title { font: 36.24px / 1 garet; color: var(--preto-font); border-left: 9px solid var(--cor1); padding-left: 15px; }
.eventos-vazio { border: 1px dashed var(--cor1); border-radius: 10px; padding: 30px; font: 500 15px / 1.8 montserrat; color: #5B5B5B; }
.card-evento { display: flex; align-items: center; gap: 40px; padding: 35px; border: 1px solid var(--cor1); border-radius: 10px; color: var(--preto); }
.card-evento > .img { display: flex; align-items: center; justify-content: center; height: 170px; overflow: hidden; background: #ccc; aspect-ratio: 45 / 34; border-radius: 10px; flex: 0 0 auto; }
.card-evento > .img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.modalidade { display: flex; align-items: center; justify-content: center; border: 1px solid var(--cor1); height: 40px; width: fit-content; min-width: 190px; max-width: 100%; border-radius: 10px; font: 600 13.83px montserrat; padding: 0 18px; }
.card-evento .title { font: 28.63px garet; }
.card-evento .desc { font: 15px / 2 montserrat; }
.card-evento .content { flex: 1; display: flex; justify-content: center; flex-direction: column; gap: 15px; }
.date { text-align: center; display: flex; flex-direction: column; gap: 10px; }
.month,
.days { font: 28.63px / 1 garet; } 
.month { margin-top: -14px; } 

.date .img { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto; }
.date .img img { width: 100%; height: 100%; object-fit: contain; }

.paginas { display: flex; gap: 20px; justify-content: center; align-items: center; }
.pagina-parent { display: flex; width: 45px; height: 45px; align-items: center; justify-content: center; background: var(--cor1); border-radius: 10px; font: 13.83px garet; transition: .4s ease; }
.pagina-parent:hover,
.pagina-parent:has(.ativo) { background: var(--preto); color: var(--branco); }
.pagina { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }

@media (max-width: 1024px) {
  .eventos-bg { padding: 56px 0; }
  .eventos,
  .eventos-secao { gap: 22px; }
  .eventos-secao-anteriores { margin-top: 12px; padding-top: 28px; }
  .eventos-secao-title { font-size: 30px; }
  .card-evento { gap: 24px; padding: 24px; }
  .card-evento > .img { height: 150px; }
  .modalidade { min-width: 165px; height: 36px; font-size: 12px; box-sizing: border-box; }
  .card-evento .content { gap: 12px; }
  .card-evento .title { font-size: 24px; }
  .card-evento .desc { font-size: 14px; line-height: 1.7; }
  .month,
  .days { font-size: 23px; }
}

@media (max-width: 768px) {
  .eventos-bg { padding: 40px 0; }
  .eventos,
  .eventos-secao { gap: 16px; }
  .eventos-secao-anteriores { margin-top: 8px; padding-top: 20px; }
  .eventos-secao-title { font-size: 24px; border-left-width: 6px; padding-left: 12px; }
  .eventos-vazio { padding: 20px; font-size: 14px; line-height: 1.6; }
  .card-evento { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px; }
  .card-evento > .img { width: 100%; max-width: 340px; height: 135px; margin: 0 auto; }
  .modalidade { min-width: 150px; height: 34px; font-size: 11px; padding: 0 14px; }
  .card-evento .title { font-size: 21px; }
  .card-evento .desc { font-size: 13px; line-height: 1.6; }
  .date { text-align: left; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
  .date .img { width: 34px; height: 34px; margin: 0; }
  .month,
  .days { font-size: 19px; }
  .month { margin-top: 0; }
  .paginas { gap: 12px; flex-wrap: wrap; }
  .pagina-parent { width: 38px; height: 38px; font-size: 12px; }
}

@media (max-width: 520px) {
  .eventos-secao-title { font-size: 21px; }
  .card-evento > .img { height: 120px; max-width: 100%; }
  .modalidade { min-width: auto; width: 100%; justify-content: flex-start; }
  .card-evento .title { font-size: 18px; }
  .card-evento .desc { font-size: 12px; line-height: 1.55; }
  .month,
  .days { font-size: 17px; }
  .paginas { gap: 10px; }
  .pagina-parent { width: 34px; height: 34px; border-radius: 8px; }
}