@charset "utf-8";

.contain.timeline {z-index: 300; background-color: var(--darkbase);}
.timeline-line::after {z-index: 2;}

/********************* GANDER HISTORY TIMELINE ******************/
.timeline {padding: 40px 20px 40px 40px; color: var(--darkbase); position: relative;}
.timeline-line {position: absolute; left: 20px; width: 1px; background: var(--light); top: 220px; bottom: 590px; transform: none;}
.timeline-item {display: flex;flex-direction: column; align-items: flex-start; width: 100%; margin-bottom: 80px;opacity: 0; transition: all 0.8s ease-out;}
.timeline-item.active { opacity: 1;transform: translateX(0);}
.timeline-content {width: 100%; box-shadow: 0 4px 15px rgba(0,0,0,0.5); margin-bottom: 20px;}
.timeline-visual {padding-top: 20px; display: flex; flex-direction: column; align-items: center; width: 100%; margin-bottom: 20px;}
.timeline-visual img {max-width: 100%; max-height: 300px; height: auto; border-radius: 10px;}
p.caption { text-align: center; padding-top: 15px; color: var(--light);}
.timeline-line::before,.timeline-line::after {content: '';position: absolute;left: 50%; width: 10px; height: 10px; background: var(--light); border-radius: 50%; transform: translateX(-50%);}
.timeline-line::before { top: -5px; }
.timeline-line::after {bottom: -5px;}

.gander-nod {display: flex; flex-direction: column; justify-content: center; align-items: center;}
  .gander-nod .feature-head {width:100%;max-width: 700px; margin:0 auto; text-align: center; padding:20px;}
.gander-nod img {max-width: 700px;}
.gander-nod .feature-head {border-bottom: none;}

.press{z-index: 10; }
.press {position: absolute; bottom: 0px; height: calc(100% ); pointer-events: none; width: 100%;}
.press img {height:300px;filter: drop-shadow(5px 5px 8px rgba(0, 0, 0, 0.8));transform-origin: center;transform: translate(0, 0) rotate(-2deg) scale(1);}
.box:has(.press) {height:100%;}
.image-area:has(.press) {min-height:260px;}
.banner-grid:has(.press) .maxed {min-width: 333px;}

@media (min-width: 900px)
{
.image-area:has(.press) {min-height:300px;}
.banner-grid:has(.press) {grid-template-columns: 1fr 460px minmax(0, 540px) 1fr;}
.press {left: 128px !important; bottom:-30px;}
}
@media (min-width: 769px) {
.timeline-line { left: 50%; transform: translateX(-50%); top: 210px; bottom: 300px;}
.timeline-item { flex-direction: row; justify-content: space-between; align-items: center;}
.reveal-left { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); flex-direction: row-reverse; }
.timeline-content {width: 45%; margin-bottom: 0;}
.timeline-visual { width: 50%; margin-bottom: 0;}
}