* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.containereventos {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 20px; /* reemplazá grid-gap por gap, ya que estás usando flex */
}

.containereventos img {
    width: 50%;
    height: auto;
    object-fit: cover; /* Opcional: recorta la imagen para que se vea bien */
}

.containereventos2 {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* centra el contenido si hay max-width */
    display: flex;
    gap: 2rem; /* mejor usar gap con flex */
    align-items: center;
    text-align: center;
}
@media (max-width: 768px) {
    .containereventos2 {
        flex-direction: column;
    }
}

.hero {
    width: 90%;
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0 auto; /* centra el contenido si hay max-width */
    padding-top: 2rem;
    flex-wrap: wrap;
  }
  .hero__text { flex: 1; min-width: 280px; }
  .hero__image { flex: 1; min-width: 280px; }
  .hero__image img { width: 100%; height: auto; border-radius: 8px; }

  @media (max-width: 768px) {
    .hero { flex-direction: column; text-align: center; }
    .hero__text, .hero__image { margin: 0 auto; }
  }

.hero__image img:hover {
    transform: scale(1.3);
    transition: 0.5s;
}

.boxeventos img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
    border-radius: 15px;
    transition: 0.1s;
}

.boxeventos img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
    border-radius: 15px;
    transition: 0.1s;
}

.boxeventos img:hover {
    transform: scale(1.3);
    transition: 0.5s;
}

.boxeventos:nth-child(1) {
    grid-column-start: span 2;
}

.boxeventos:nth-child(4) {
    grid-column-start: span 2;
}

.h2classeventos {
    font-family: cinzel, serif;
    text-align: center;
}

.h3classeventos {
    margin: 32px 100px 32px 100px;
    font-family: cinzel, serif;
    text-align: center;
    font: var(--font_8);
}
@media (max-width: 768px) {
    .h3classeventos {
        margin: 50px 0 50px 0;
    }
}

.eventosimg2 {
    width: 100%;
    margin-left: 6%;
    margin-right: 6%;
    font-size: x-large;
    font-family: cinzel, serif;
}
.txtdestacado {
    font-size: 35px;
    font-weight: bold;
    color: #585858; 
    font-family: 'cinzel', serif;
  }

.txtdestacado2 {
    font-size: 24px;
    font-weight: bold;
    color: #585858; 
    font-family: 'cinzel', serif;
  }

.eventostxt {
    margin: 50px 100px 50px 100px;
    font-family: cinzel, serif;
    font-size: xx-large;
    text-align: center;
}
@media (max-width: 768px) {
    .eventostxt {
        margin: 50px 0 50px 0;
    }
}