.info-outer {
        margin: auto;
        width: 75%;
        display: flex;
        align-items: flex-end;
      }

      .info-container {
            flex: 20%;
            display: grid;
            grid-template-columns: auto;
            grid-template-rows: 1fr 1fr 1fr;
            margin: auto;
            background-color: #EA1D5D;
            color: #ffffff;
            border-radius: 30px 0 0 30px;
        }
        .info-box {
          padding: 2em;
            text-align: center;
            margin: auto;
        }
        .info-value {
            font-size: 2em;
            font-weight: bold;
        }
        .info-subtitle {
            font-size: 1em;
            color: #ffffff;
        }

.info-video {
  flex: 80%;
  width: 100%;
  height: auto;
  border-radius: 30px;
  overflow: hidden;
  line-height: 0;
}
.info-video iframe {
    width: 100%;
    height: auto;
}  


@media (max-width: 800px) {
  .info-container {
    flex: 33%;
    width: 75%;
    height: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    border-radius: 30px 30px 0 0;
  }
  .info-outer {
    width: 90%;
    flex-direction: column;
  }
}
@media (max-width: 800px) {
  .info-outer {width:90%;}
}


#tab-532 .col-sm-5 {
  width: 25% !important;
}

Voor de Timeline Visuele Stijl:

.timeline-line {
  background: linear-gradient(180deg, transparent 0%, var(--accent-color) 5%, var(--accent-color) 95%, transparent 100%);
}

Dit bepaalt de centrale lijn. Je kunt var(--accent-color) aanpassen naar elke kleur.

Voor de Kaarten (Event Cards):

.event-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-card:hover {
  transform: translateY(-4px);
}

Dit geeft de hover-effect. Je kunt translateY(-4px) aanpassen voor meer/minder beweging.

Voor het Uitvouwen (Expand Effect):

.event-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
}

.event-content.expanded {
  max-height: 500px;
}

max-height: 500px bepaalt hoe groot de kaart maximaal uitvouwt.

Voor Animaties:

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.3); }
  50% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.6); }
}

Dit is de glowende animatie rond de legende-badges.

Tekstuur Achtergrond:

.papyrus-texture {
  background-image: 
    radial-gradient(ellipse at 20% 30%, rgba(139, 90, 43, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(139, 90, 43, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, rgba(245, 235, 220, 0.3) 0%, transparent 100%);
}



.module-events .paragraphs {
  display: flex;
  gap: 10px;
}

.module-events .paragraphs .img-responsive {
  width: 50%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
}

.heading-image {
  padding-bottom: 32%; /* was 25% → ~30% taller */
}