.bel-timeline__top { position: relative; padding-top: var(--bel-section); background: var(--bel-bg); }
.bel-timeline__head { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.bel-timeline__head .bel-heading { width: 50%; max-width: 650px; margin-bottom: 30px; }
.bel-timeline__photo { position: relative; height: clamp(220px, 28vw, 420px); margin-top: -60px; overflow: hidden; }
.bel-timeline__photo img, .bel-timeline__photo .bel-ph { width: 100%; height: 100% !important; object-fit: cover; object-position: center 60%; -webkit-mask: linear-gradient(to bottom, transparent 0, #000 45%); mask: linear-gradient(to bottom, transparent 0, #000 45%); }
.bel-timeline__band { padding: 80px 0 90px; }
.bel-timeline__track { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; cursor: grab; }
.bel-timeline__track::-webkit-scrollbar { display: none; }
.bel-timeline__track.is-drag { cursor: grabbing; scroll-snap-type: none; }
.bel-timeline__list { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 25%; margin: 0; padding: 0; list-style: none; }
.bel-timeline__list::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, .35); }
.bel-timeline__item { position: relative; display: grid; grid-template-rows: 160px 70px 160px; justify-items: center; align-items: center; padding: 0 16px; scroll-snap-align: start; }
.bel-timeline__card { position: relative; display: grid; place-items: center; width: 100%; max-width: 300px; min-height: 130px; padding: 22px 24px; background: #fff; color: var(--bel-heading); text-align: center; transition: transform .35s var(--bel-ease); }
.bel-timeline__card::after { content: ""; position: absolute; left: 50%; width: 22px; height: 22px; background: #fff; transform: translateX(-50%) rotate(45deg); }
.bel-timeline__card-title { margin: 0; font: 500 21px/1.45 var(--bel-font-h); }
.bel-timeline__card-text { margin: 8px 0 0; font-size: 15px; color: var(--bel-text); }
.bel-timeline__dot { grid-row: 2; position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 8px #6b6b6b; transition: box-shadow .3s; }
.bel-timeline__day { color: #fff; font: 500 28px/1.2 var(--bel-font-h); }
.bel-timeline__item.is-up .bel-timeline__card { grid-row: 1; align-self: end; }
.bel-timeline__item.is-up .bel-timeline__card::after { bottom: -9px; }
.bel-timeline__item.is-up .bel-timeline__day { grid-row: 3; }
.bel-timeline__item.is-down .bel-timeline__day { grid-row: 1; }
.bel-timeline__item.is-down .bel-timeline__card { grid-row: 3; align-self: start; }
.bel-timeline__item.is-down .bel-timeline__card::after { top: -9px; }
.bel-timeline__item:hover .bel-timeline__dot { box-shadow: inset 0 0 0 8px var(--bel-accent); }
.bel-timeline__item.is-up:hover .bel-timeline__card { transform: translateY(-6px); }
.bel-timeline__item.is-down:hover .bel-timeline__card { transform: translateY(6px); }
.bel-timeline__progress { position: relative; height: 4px; margin-top: 50px; background: rgba(255, 255, 255, .22); }
.bel-timeline__progress span { position: absolute; inset: 0 auto 0 0; width: 66%; background: var(--bel-accent); transition: width .2s; }
@media (max-width: 1024px) {
	.bel-timeline__list { grid-auto-columns: 50%; }
	.bel-timeline__head .bel-heading { width: 100%; }
	.bel-timeline__photo { margin-top: 0; }
}
@media (max-width: 600px) {
	.bel-timeline__list { grid-auto-columns: 82%; }
	.bel-timeline__card-title { font-size: 18px; }
	.bel-timeline__day { font-size: 22px; }
}