/* Override layout.css overflow-x: hidden on html/body so the
   timeline-wrapper can receive native horizontal scroll events
   (Magic Mouse / Trackpad). Only loaded on the architecture page. */
html, body {
  overflow-x: auto !important;
}

/*Architecture Section*/
.timeline-container-architecture,
.timeline-container-architecture-zero,
.timeline-image-architecture-first,
.timeline-container-architecture-right-text,
.timeline-container-architecture-third-text,
.timeline-container-architecture-fourth-text,
.timeline-container-architecture-fifth-text,
.timeline-container-architecture-sixth-text,
.timeline-image-architecture-second,
.timeline-image-architecture-third,
.timeline-image-architecture-fourth,
.timeline-image-architecture-fifth {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.timeline-container-architecture,
.timeline-container-architecture-zero,
.timeline-image-architecture-first,
.timeline-container-architecture-right-text,
.timeline-image-architecture-second,
.timeline-container-architecture-third-text,
.timeline-image-architecture-fifth,
.timeline-container-architecture-sixth-text {
    transform: none;
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.timeline-wrapper-architecture {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  /* 96px = navbar / header height (see --timeline-header-height in layout.css) */
  height: calc(100dvh - 96px);
  white-space: nowrap;
  margin-top: 0;
  min-width: 100vw;
  gap: 0;
  justify-content: flex-start;
  align-items: stretch;
  background-color: #2e546f;
}

.timeline-container-architecture,
.timeline-container-architecture-zero,
.timeline-image-architecture-first,
.timeline-container-architecture-right-text,
.timeline-image-architecture-second,
.timeline-container-architecture-third-text,
.timeline-image-architecture-third,
.timeline-container-architecture-fourth-text,
.timeline-image-architecture-fourth,
.timeline-container-architecture-fifth-text,
.timeline-container-architecture-sixth-text,
.timeline-image-architecture-fifth,
.timeline-image-architecture-sixth,
.timeline-container-architecture-fourth,
.timeline-container-architecture-sixth {
  flex: 0 0 auto;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
}

/* Background colors for image containers to eliminate white space */
.timeline-image-architecture-first,
.timeline-image-architecture-second,
.timeline-image-architecture-third,
.timeline-image-architecture-fourth,
.timeline-image-architecture-fifth,
.timeline-image-architecture-sixth {
  background-color: #4B4B4A;
}

.timeline-image-architecture-first {
  background: #4B4B4A url('../assets/Architecture/Cubes/small/Cubes_Stov_21_09_2019_088_extended_web_small.jpg') no-repeat center center;
  background-size: auto 100%;
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  height: 100%;
  /* 96px = header height; 1.8668 = image aspect ratio (w/h) for Cubes_Stov_088 */
  width: calc((100dvh - 96px) * 1.8668);
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
}

@media (min-width: 1400px) {
  .timeline-image-architecture-first {
    background-size: auto 100%;
  }
}

@media (max-width: 480px) {
  .timeline-image-architecture-first {
    background-size: auto 100%;
    background-position: center center;
  }
}




.first-mouse-container {
  width: calc(12vw + 10vh);
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
}

.second-mouse-container {
  width: calc(12vw + 10vh);
  height: 115%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
}

@media (max-width: 768px) {
  .first-mouse-container, .second-mouse-container {
    display: none;
  }
}
@media (min-width: 1400px) {
}


.timeline-container-architecture {
  min-width: 90vw;
  height: 100%;
  background-color: #2e546f;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  box-sizing: border-box;
  padding: calc(3vw + 10px) calc(6vw + 10px);
  font-size: calc(0.5vw + 0.5vh);
  overflow: hidden;
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 768px){
  .timeline-container-architecture{
    min-width: 101vw;
    align-items: flex-end;
    padding-bottom: 5vh;
    padding-left: 5vw;
    padding-right: 5vw;
    justify-content: center;
  }
  .timeline-container-architecture .timeline-content-architecture-left p {
    text-align: left;
  }
}


.cube-img{
  transform: scale(1);
  display: none !important;
}

@media (max-width: 768px){
  .cube-img{
    display: block !important;
    margin-bottom: 3.5rem;
  }
}


.timeline-image-architecture-second {
  background: #4B4B4A url('../assets/Architecture/Cubes/small/CUBES_01_extended_web_small.jpg') no-repeat center center;
  background-size: auto 100%;
  display: flex;
  padding: 0;
  margin: 0;
  height: 100%;
  /* 96px = header height; 1.397 = image aspect ratio (w/h) for CUBES_01 */
  width: calc((100dvh - 96px) * 1.397);
  flex: 0 0 auto;
  overflow: hidden;
  box-shadow: var(--custom-box-shadow);
}

@media (max-width: 1200px) {
  .timeline-image-architecture-second {
    background-position: center center;
  }
}

@media (max-width: 768px) {
  .timeline-image-architecture-second {
    background-position: center center;
  }
}

@media (max-width: 480px) {
  .timeline-image-architecture-second {
    background-size: auto 100%;
  }
}







.timeline-content-architecture {
  color: #FFFFFF;
  max-width: 90vw;
  font-size: calc(2vw + 1.5vh);
  line-height: 1.4;
  word-wrap: break-word;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
}

.timeline-content-architecture-left {
  color: #FFFFFF;
  max-width: 60ch;
  min-width: 0;
  font-size: calc(1.5vw + 1.5vh);
  line-height: 1.4;
  word-wrap: break-word;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: left;
  box-sizing: border-box;
  margin-bottom: 2.5rem;
}

@media (max-width: 768px) {
  .timeline-content-architecture-left {
    max-width: 44ch;
    line-height: 1.55;

    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: pretty;

    font-size: clamp(0.95rem, 1.1vw + 1.1vh, 1.05rem);
  }
}

.timeline-content-architecture-black {
  color: #4B4B4A;
  max-width: 90vw;
  font-size: calc(2vw + 1.5vh);
  line-height: 1.4;
  word-wrap: break-word;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
}

.timeline-content-architecture-center {
  color: #FFFFFF;
  max-width: 90vw;
  font-size: calc(3vw + 3vh);
  line-height: 1.4;
  word-wrap: break-word;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}


.timeline-content-architecture h4,
.timeline-content-architecture-left h4,
.timeline-content-architecture-black h4 {
  font-size: calc(1.2vw + 1.2vh);
}

.timeline-content-architecture h4 {
  text-align: right;
  margin: 0;
}

.timeline-content-architecture-left h4{
  text-align: left;
  margin: 0;
  margin-bottom: 1rem;
  line-height: 1.4 !important;
  padding-left: 0.4rem;
  white-space: pre-line;
}

.extra-margin{
  margin-bottom: 4rem !important;
}



 @media (max-width: 768px){
  .timeline-content-architecture h4 {
    text-align: right;
    margin-bottom: 2vh;
    font-size: 18px;
  }
 }

 @media (max-width: 480px){
  .timeline-content-architecture h4 {
    text-align: right;
    margin-bottom: 2.5vh;
    font-size: 20px;
  }
 }


  @media (max-width: 768px){
  .timeline-content-architecture-left h4 {
    text-align: left;
    margin-bottom: 2vh;
    font-size: 18px;
  }
 }

 @media (max-width: 480px){
  .timeline-content-architecture-left h4 {
    text-align: left;
    margin-bottom: 2.5vh;
    font-size: 20px;
  }
 }

.timeline-content-architecture p {
  text-align: right;
  margin-top: 3vh;
  margin-right: 0;
  line-height: 1.6;
  font-size: calc(1vw + 1vh);
  word-wrap: break-word;
}

.timeline-content-architecture-left p {
  text-align: justify;           /* Blocksätze */
  text-align-last: left;         /* letzte Zeile links; bei Bedarf: justify */
  hyphens: auto;                 /* Silbentrennung */
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  word-break: normal;
  white-space: normal;           /* falls irgendwo vererbt wurde */
  font-size: calc(1vw + 1vh);    /* '01vw' → '1vw' */
  padding-top: 1vw;
  hyphenate-limit-chars: 6 3 3;
}

@media (max-width: 786px) {
  .timeline-content-architecture-left p {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  word-break: break-word;
  white-space: break-word;
  text-size-adjust: 100%;
  word-spacing: -0.05em;
  letter-spacing: 0.005em;
  line-height: 1.4;
  font-size: calc(1vw + 1.2vh);
  padding-top: 2.5vw;
}
}

@media (max-width: 480px) {
.timeline-content-architecture-left p {
  text-align: justify;           /* Blocksätze */
  text-align-last: left;         /* letzte Zeile links; bei Bedarf: justify */
  hyphens: auto;                 /* Silbentrennung */
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  word-break: break-word;
  white-space: break-word;
  font-size: calc(1.5vw + 1.5vh);    /* '01vw' → '1vw' */
  padding-top: 2.5vw;
  hyphenate-limit-chars: 6 3 3;
}
}

.left-minor{
  margin-top: -5rem !important;
}





@media (max-width:768px) {
  .timeline-content-architecture p {
    text-align: right; /* Text rechtsbündig */
    margin: 0;
    padding: 0; /* Optional: Kein zusätzliches Padding */
    line-height: 1.6; /* Angenehme Lesbarkeit */
    font-size: calc(2vw + 0.5vh); /* Dynamische Schriftgröße */
    word-wrap: break-word; /* Lange Wörter umbrechen */
    overflow-wrap: break-word; /* Kompatibilität mit älteren Browsern */
    white-space: normal; /* Zeilenumbruch bei Überlauf erzwingen */
    max-width: 100%; /* Text bleibt innerhalb des Containers */
    text-overflow: ellipsis; /* Optional: Drei Punkte bei abgeschnittenem Text */
  }
}

@media (max-width: 480px) {
  .timeline-content-architecture p {
    text-align: right; /* Text rechtsbündig */
    margin: 0;
    padding: 0; /* Optional: Kein zusätzliches Padding */
    line-height: 1.6; /* Angenehme Lesbarkeit */
    font-size: calc(3vw + 0.5vh); /* Dynamische Schriftgröße */
    word-wrap: break-word; /* Lange Wörter umbrechen */
    overflow-wrap: break-word; /* Kompatibilität mit älteren Browsern */
    white-space: normal; /* Zeilenumbruch bei Überlauf erzwingen */
    max-width: 100%; /* Text bleibt innerhalb des Containers */
    text-overflow: ellipsis; /* Optional: Drei Punkte bei abgeschnittenem Text */
  }
}



@media (max-width: 768px){
  .timeline-container-architecture-first-text{
    min-width: 120vw
  }
}

.timeline-container-architecture-first-text {
  min-width: 25vw;
  background-color: #4B4B4A; /* Hintergrundfarbe */
  display: block; /* Block-Layout für die natürliche Darstellung */
  font-size: calc(1vw + 1vh); /* Dynamische Schriftgröße */
  padding: 1vw; /* Innenabstand */
  text-align: center; /* Zentriert Text nur horizontal */
  box-sizing: border-box; /* Padding wird in die Breite einbezogen */
  overflow: auto; /* Scrollbar, falls der Text zu lang ist */
  box-shadow: none;
  border: none;
  display: none;
}

@media (max-width: 480px) {
  .timeline-container-architecture-first-text{
    min-width: 100vw !important;
    background-color: #2e546f;
  }
}






.timeline-content-architecture img {
  max-width: 100%;    /* Image scales based on container width */
  max-height: 100%;   /* Image scales based on container height */
  object-fit: contain; /* Ensures image maintains aspect ratio */
}



/*Pförtner Section*/
.timeline-container-architecture-zero {
  min-width: 100vw;
  background-color: #4B4B4A;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  box-sizing: border-box;
  padding: calc(3vw + 10px) calc(3vw + 10px);
  padding-right: calc(12vw + 10vh);
  font-size: calc(0.5vw + 0.5vh);
  overflow: hidden;
  margin: 0;
  position: relative;
  padding-bottom: 12rem !important;
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .timeline-container-architecture-zero {
    padding: 20px;
    padding-left: 14vw;
    margin: 0 !important;
    justify-content: flex-start;
  }
}

@media (max-width: 768px){
  .timeline-container-architecture-zero{
    min-width: 101vw;
    margin: 0 !important;
    justify-content: flex-start;
    padding-left: 14vw;
    padding-right: 5vw;
    align-items: flex-end;
    padding-bottom: 5vh !important;
    padding-top: 0;
  }
}




.timeline-container-architecture-third-text {
  min-width: 25vw;
  height: 100%;
  background-color: #4B4B4A;
  display: flex;
  font-size: calc(1vw + 1vh);
  padding: 1vw;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  flex: 0 0 auto;
  margin: 0;
  word-wrap: break-word;
  overflow: hidden;
  box-shadow: none;
  border: none;
}

@media (max-width: 768px){
  .timeline-container-architecture-third-text{
    min-width: 100vw;
    align-items: flex-end;
    padding-bottom: 10vh;
  }
}

@media (max-width: 480px){
  .third-text-p{
    font-size: 18px;
    padding: 2vw;
  }
}




.number-buttons {
  display: inline-block; /* Makes the buttons sit next to each other */
  width: auto;
  margin: 10px 10px; /* Adds some spacing between the buttons */
  padding: 15px;
  color: #fff;
  border: 1px solid white;
  font-family: 'Abnes', sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 14px; /* Adjust the font size for the buttons */
  background-color: transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.5s ease;
  outline: none;
  z-index: 14;
}

/* Hover effect for buttons */
.number-buttons:hover {
  color: #001F3F;
  background-color: #fff;
  transition: all 0.5s ease;
  scale: 1.1;
}

.numbered-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.numbers {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.timeline-image-architecture-third {
  background: #4B4B4A url('../assets/Architecture/Cubes/small/CUBES_02_extended_web_small.jpg') no-repeat center center;
  background-size: auto 100%;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  height: 100%;
  /* 96px = header height; 1.397 = image aspect ratio (w/h) for CUBES_02 */
  width: calc((100dvh - 96px) * 1.397);
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
  transition: background-image 1s ease-in-out, opacity 1s ease-in-out;
  opacity: 1;
}

@media (max-width: 480px) {
  .timeline-image-architecture-third {
    /* 1.6835 = wider mobile crop aspect ratio (w/h) for CUBES_02 */
    width: calc((100dvh - 96px) * 1.6835);
  }
}




/*Pförtner Section*/
.timeline-container-architecture-fourth {
  min-width: 130vw;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: left;
  text-align: left;
  box-sizing: border-box;
  padding: calc(3vw + 10px) calc(6vw + 10px);
  font-size: calc(0.5vw + 0.5vh);
  overflow: hidden;
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 480px) {
  .timeline-container-architecture-fourth {
    font-size: 14px;
    padding: 20px;
  }
}

.timeline-content-black{
  color: #4B4B4A !important;
}

@media (max-width: 768px){
  .timeline-container-architecture-fourth{
    min-width: 101vw;
    align-items: flex-end;
    padding-bottom: calc(5vh + 4.5rem);
    padding-left: 5vw;
    padding-right: 5vw;
    justify-content: center;
  }

  .timeline-container-architecture-fourth .timeline-content-architecture {
    align-items: flex-start;
    max-width: 44ch;
    font-size: clamp(0.95rem, 1.1vw + 1.1vh, 1.05rem);
    line-height: 1.55;
  }

  .timeline-container-architecture-fourth .timeline-content-architecture h4 {
    text-align: left;
    white-space: normal;
    margin-bottom: 2vh;
    font-size: 18px;
  }

  .timeline-container-architecture-fourth .timeline-content-architecture p br {
    display: none;
  }

  .timeline-container-architecture-fourth .timeline-content-architecture p {
    text-align: left;
    white-space: normal;
    font-size: calc(1vw + 1.2vh);
    line-height: 1.4;
    max-width: 46ch;
    margin: 0;
    padding: 0;
  }
}

@media (max-width: 480px){
  .timeline-container-architecture-fourth .timeline-content-architecture h4 {
    font-size: 20px;
    margin-bottom: 2.5vh;
  }

  .timeline-container-architecture-fourth .timeline-content-architecture p {
    font-size: calc(1.5vw + 1.5vh);
  }
}

.timeline-image-architecture-fourth {
  background: #4B4B4A url('../assets/Architecture/Cubes/small/Cubes_Stov_21_09_2019_011_bearbeitet_small_web.jpg') no-repeat center center;
  background-size: auto 100%;
  display: flex;
  padding: 0;
  margin: 0;
  height: 100%;
  /* 96px = header height; 0.5768 = image aspect ratio (w/h) for Cubes_Stov_011 (portrait) */
  width: calc((100dvh - 96px) * 0.5768);
  flex: 0 0 auto;
  overflow: hidden;
}

@media (max-width: 1200px) {
  .timeline-image-architecture-fourth {
    background-position: center center;
  }
}

@media (max-width: 768px) {
  .timeline-image-architecture-fourth {
    background-position: center center;
  }
}

@media (max-width: 480px) {
  .timeline-image-architecture-fourth {
    background: #4B4B4A url('../assets/Architecture/Cubes/small/Cubes_Stov_21_09_2019_011_bearbeitet_small_web.jpg') no-repeat center center;
    background-size: auto 100%;
  }
}


.timeline-container-architecture-fifth-text {
  min-width: 40vw;
  background-color: var(--brown);
  display: flex;
  font-size: calc(2vw + 2.4vh);
  padding: calc(3vw + 20px) calc(3vw + 20px);
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow: hidden;
  flex: 0 0 auto;
  margin: 0;
}

.timeline-container-architecture-fifth-text .timeline-content-architecture-center p {
  font-size: calc(1.1vw + 1.1vh);
}


@media (max-width: 768px){
  .timeline-container-architecture-fifth-text{
    min-width: 100vw;
    padding-bottom: 10rem;
    padding-top: 25vh;
    font-size: calc(1.5vw + 1.5vh) !important;
  }

  .timeline-container-architecture-fifth-text .timeline-content-architecture-center p {
    font-size: calc(1.5vw + 1.5vh);
  }
}

@media (max-width: 480px){
  .timeline-content-architecture-center p{
    min-width: 120vw !important;
  }

  .timeline-container-architecture-fifth-text .timeline-content-architecture-center p {
    font-size: calc(2vw + 2vh);
  }
}




.timeline-image-architecture-fifth {
  background: #4B4B4A url('../assets/Architecture/Cubes/small/Cubes_Stov_21_09_2019_006_cropped_extended_web_small.jpg') no-repeat center center;
  background-size: auto 100%;
  display: flex;
  padding: 0;
  margin: 0;
  height: 100%;
  /* 96px = header height; 1.5646 = image aspect ratio (w/h) for Cubes_Stov_006 */
  width: calc((100dvh - 96px) * 1.5646);
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
}

@media (max-width: 1200px) {
  .timeline-image-architecture-fifth {
    background-position: center center;
  }
}

@media (max-width: 768px) {
  .timeline-image-architecture-fifth {
    background-position: center center;
  }
}

@media (max-width: 480px) {
  .timeline-image-architecture-fifth {
    background-size: auto 100%;
  }
}




#first-blur-container {
  position: absolute;
  right: 0; /* Platziert das Element an der rechten Seite des übergeordneten Containers */
  top: 0; /* Platziert das Element an der oberen Kante */
  width: 20%; /* Stellt sicher, dass der Container 20vw breit ist */
  height: 102%; /* Nimmt die gesamte Höhe des übergeordneten Containers ein */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}


.timeline-image-architecture-sixth {
  background: #4B4B4A url('../assets/Architecture/Cubes/small/Cubes_Stov_21_09_2019_021_extended_web_small.jpg') no-repeat center center;
  background-size: auto 100%;
  display: flex;
  padding: 0;
  margin: 0;
  height: 100%;
  /* 96px = header height; 1.5026 = image aspect ratio (w/h) for Cubes_Stov_021 */
  width: calc((100dvh - 96px) * 1.5026);
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
}

@media (max-width: 1200px) {
  .timeline-image-architecture-sixth {
    background-position: center center;
  }
}

@media (max-width: 768px) {
  .timeline-image-architecture-sixth {
    background-position: center center;
  }
}

@media (max-width: 480px) {
  .timeline-image-architecture-sixth {
    background-size: auto 100%;
  }
}

#second-blur-container {
  position: absolute;
  left: 0; /* Verschiebt den Container weiter nach links */
  top: 0;
  width: 8vw; /* Breite des Containers */
  height: 100%; /* Nimmt die gesamte Höhe des übergeordneten Containers ein */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.timeline-container-architecture-sixth {
  min-width: 100vw;
  background-color: #9a9185;
  display: flex;
  justify-content: center;
  align-items: left;
  text-align: left;
  box-sizing: border-box;
  padding: calc(3vw + 10px) calc(6vw + 10px);
  font-size: calc(0.5vw + 0.5vh);
  overflow: hidden;
  font-variant-ligatures: no-common-ligatures !important;
  font-feature-settings: "liga" 0, "dlig" 0, "clig" 0, "calt" 0 !important;
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 480px) {
  .timeline-container-architecture-sixth {
    font-size: 14px;
    padding: 20px;
  }
}

.timeline-content-white{
  color: #fff !important;
}

@media (max-width: 768px){
  .timeline-container-architecture-sixth{
    min-width: 101vw;
    align-items: flex-end;
    padding-bottom: calc(5vh + 4.5rem);
    padding-left: 5vw;
    padding-right: 5vw;
    justify-content: center;
  }

  .timeline-container-architecture-sixth .timeline-content-architecture {
    align-items: flex-start;
    max-width: 46ch;
    font-size: clamp(0.95rem, 1.1vw + 1.1vh, 1.05rem);
    line-height: 1.55;
  }

  .timeline-container-architecture-sixth .timeline-content-architecture h4 {
    text-align: left;
    white-space: normal;
    margin-bottom: 2vh;
    font-size: 18px;
  }

  .timeline-container-architecture-sixth .timeline-content-architecture p br {
    display: none;
  }

  .timeline-container-architecture-sixth .timeline-content-architecture p {
    text-align: left;
    white-space: normal;
    font-size: calc(1vw + 1.2vh);
    line-height: 1.4;
    max-width: 46ch;
    margin: 0;
    padding: 0;
  }
}

@media (max-width: 480px){
  .timeline-container-architecture-sixth .timeline-content-architecture h4 {
    font-size: 20px;
    margin-bottom: 2.5vh;
  }

  .timeline-container-architecture-sixth .timeline-content-architecture p {
    font-size: calc(1.5vw + 1.5vh);
  }
}