:root {
--c-white: #fff;
--c-black: #000;
--c-yellow-300: #f8eb6c;
--c-yellow-400: #ffe500;
--c-brown-200: #eee9e0;
--c-brown-300: #eae5dc;
--c-brown-400: #dbd1bf;
--c-brown-500: #cbbba0;
--c-brown-600: #b1a188;
--c-brown-700: #432918;
--c-gray-200: #bebebe;
--c-gray-300: #f0f0f0;
--c-gray-400: #efefef;
--c-gray-500: #535353;
--c-gray-600: #d5d5d5;
--c-gray-700: #626262;
--c-primary: var(--c-yellow-400);
--c-text: var(--c-black);
--f-main: "Noah", sans-serif;
--f-headings: "Noah", sans-serif;
--wrapper-width: 120rem;
--padding-width: 2rem;
--gutter-width: 2rem;
--transition-duration: 0.25s;
}
.timeline__item {
margin-bottom: 6.3rem;
padding-bottom: 4rem;
}
.timeline__item:last-of-type {
padding-bottom: 0;
}
.timeline__item:last-of-type:after {
content: none;
}
@media (min-width: 768px) {
.timeline__item {
gap: 4.1rem;
margin-bottom: 6.8rem;
padding-bottom: 7rem;
}
}
@media (min-width: 992px) {
.timeline__item {
margin-bottom: 9.9rem;
padding-bottom: 10rem;
}
.timeline__item:last-of-type {
margin-bottom: 20rem;
}
}
.timeline__item:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0.1rem;
background-color: #707070;
}
.timeline__data,
.timeline__visuals {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.timeline__video-wrapper,
.timeline__visual {
height: 21.4rem;
margin-bottom: 1.7rem;
overflow: hidden;
}
@media (min-width: 600px) {
.timeline__video-wrapper,
.timeline__visual {
height: 36.4rem;
}
}
@media (min-width: 768px) {
.timeline__video-wrapper,
.timeline__visual {
height: 28.3rem;
margin-bottom: 4.7rem;
}
}
@media (min-width: 992px) {
.timeline__video-wrapper,
.timeline__visual {
height: 33.3rem;
}
}
@media (min-width: 1200px) {
.timeline__video-wrapper,
.timeline__visual {
width: 69.1rem;
height: 42.3rem;
}
}
.timeline__video-wrapper:last-of-type,
.timeline__visual:last-of-type {
margin-bottom: 0;
}
.timeline .swiper-container {
height: 100%;
}
.timeline .swiper-slide,
.timeline__image,
.timeline__video {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.timeline__embed {
height: 100%;
}
.timeline__date {
margin: 3rem 0 3.4rem;
font-size: 2rem;
letter-spacing: 0.09rem;
}
@media (min-width: 768px) {
.timeline__date {
margin: 0.4rem 0 4.6rem;
font-size: 3rem;
}
}
.timeline__content h1,
.timeline__content h2,
.timeline__content h3,
.timeline__content h4 {
margin-bottom: 1.6rem;
font-size: 3.2rem;
line-height: 3.7rem;
letter-spacing: 0.13rem;
}
@media (min-width: 992px) {
.timeline__content h1,
.timeline__content h2,
.timeline__content h3,
.timeline__content h4 {
font-size: 3.8rem;
line-height: 4.2rem;
letter-spacing: 0.14rem;
}
}
@media (min-width: 768px) {
.timeline__content h1,
.timeline__content h2,
.timeline__content h3,
.timeline__content h4 {
margin-bottom: 1.8rem;
font-size: 4.5rem;
line-height: 4.8rem;
letter-spacing: 0.16rem;
word-break: break-word;
}
}
@media (min-width: 992px) {
.timeline__content h1,
.timeline__content h2,
.timeline__content h3,
.timeline__content h4 {
padding-right: 6.5rem;
}
}
.timeline__content p {
font-size: 1.7rem;
line-height: 2.5rem;
letter-spacing: 0.05rem;
}
@media (min-width: 768px) {
.timeline__content p br {
content: "";
display: block;
margin-top: 2.5rem;
}
}
.timeline__nav {
left: 0;
right: unset;
}
.timeline__visuals .video-wrapper__embed iframe {
visibility: visible;
opacity: 1;
}