/* ============================================================
   Giuliano Store - story page
   Loaded before dark-mode.css.

   Desktop v6: flex timeline, intrinsic articles.
   Article dimensions come from images/logos and copy max-width only.
   ============================================================ */

.page-story .animate__animated {
  animation-duration: var(--gs-anim-duration, 0.9s);
  animation-timing-function: var(--gs-anim-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.page-story .gs-header__link[href$="storia/"] {
  color: var(--gs-bg);
}

.page-story .gs-header__link[href$="storia/"]::after {
  width: 100%;
}

.gs-story-hero h1 {
  text-shadow: 0 12px 20px rgb(2 7 17 / 38%);
}

/* Desktop horizontal timeline -------------------------------------------- */

.gs-story-horizontal {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background: var(--gs-blue);
}

.gs-story-sticky {
  position: sticky;
  top: var(--gs-header-height);
  height: calc(100vh - var(--gs-header-height));
  min-height: 650px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--gs-blue) 0%, var(--gs-blue-light) 100%);
}

.gs-story-track {
  width: max-content;
  min-width: 100vw;
  height: 100%;
  min-height: 650px;
  overflow: hidden;
  background:
    radial-gradient(circle at 26% 47%, rgb(255 255 255 / 8%) 0 2px, transparent 46%),
    radial-gradient(circle at 72% 38%, rgb(255 255 255 / 6%) 0 2px, transparent 48%),
    linear-gradient(90deg, var(--gs-blue) 0%, var(--gs-blue-light) 100%);
  will-change: transform;
}

.gs-story-stage {
  width: max-content;
  min-width: 100vw;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(72px, 7vw, 135px);
}

.gs-story-topline {
  display: block;
  width: 100%;
  height: 1px;
  background: rgb(243 245 250 / 70%);
}

.gs-story-articles {
  display: flex;
  align-items: stretch;
  gap: clamp(54px, 5.7vw, 110px);
}

.gs-story-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--gs-bg);
  position: relative;
}

.gs-story-dot {
  position: relative;
  z-index: 6;
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-top: -13px;
  margin-left: clamp(10px, 2.1vw, 40px);
  border: 1px solid rgb(243 245 250 / 40%);
  border-radius: 999px;
  box-shadow: 0 0 0 17px rgb(243 245 250 / 8%);
}

.gs-story-dot::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  background: var(--gs-red);
}

.gs-story-dot.is-active,
.gs-story-mobile-card__dot.is-active {
  animation: gs-story-dot-pulse 1.25s ease-in-out infinite;
}

@keyframes gs-story-dot-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 17px rgb(243 245 250 / 8%),
      0 0 0 0 rgb(212 2 11 / 36%);
  }

  55% {
    transform: scale(1.12);
    box-shadow:
      0 0 0 17px rgb(243 245 250 / 8%),
      0 0 0 14px rgb(212 2 11 / 0%);
  }
}

.gs-story-card__body {
  display: grid;
  gap: clamp(24px, 2.4vw, 46px);
  padding-top: 0;
  height: 100%;
}

.gs-story-card__body--two {
  grid-template-columns: auto auto;
}

.gs-story-card__body--2008 {
  grid-template-columns: auto auto auto;
  gap: clamp(24px, 2vw, 38px);
}

.gs-story-card__body--vultech {
  grid-template-columns: auto;
  gap: clamp(28px, 3.7vh, 46px);
}

.gs-story-vultech-top {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: clamp(30px, 3.4vw, 64px);
}

.gs-story-card__body--products {
  grid-template-columns: auto auto auto;
  align-items: stretch;
  gap: clamp(26px, 2.9vw, 56px);
}

.gs-story-products-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gs-story-products-col--copy {
  justify-content: space-between;
}

.gs-story-products-col--keyboard {
  align-items: center;
}

.gs-story-card__body--security {
  grid-template-columns: auto auto auto;
  align-items: stretch;
  gap: clamp(28px, 3vw, 58px);
}

.gs-story-security-products {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gs-story-card__body--simple {
  grid-template-columns: auto;
  align-content: flex-start;
  gap: 24px;
}

.gs-story-card__body--isiwi {
  grid-template-columns: auto auto;
  gap: clamp(50px, 8vw, 120px);
}

.gs-story-card__body--final {
  position: relative;
  grid-template-columns: auto;
  place-items: center;
  gap: clamp(24px, 2.4vw, 20px);
  text-align: center;
  width: clamp(390px, 27.08vw, 510px);
  height: auto;
}
.gs-story-products-col--copy .gs-story-media {
  margin: 10% auto;
}
.gs-story-products-col--keyboard .gs-story-media {
  margin: 0% auto;
}
.gs-story-media {
  margin-block: auto;
}
.gs-story-copy {
  margin-block: auto;
}

.gs-story-media {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: 0;
}

.gs-story-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 58px;
}
.gs-story-card__body--isiwi .gs-story-copy {
  gap: 18px;
}

.gs-story-img,
.gs-story-logo {
  display: block;
  max-width: none;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.gs-story-img {
  filter: drop-shadow(0 22px 24px rgb(2 7 17 / 20%));
}

.gs-story-year,
.gs-story-word {
  display: block;
  color: transparent;
  font-size: clamp(150px, 10.42vw, 200px);
  font-weight: 800;
  line-height: 0.8;
  white-space: nowrap;
  -webkit-text-stroke: 2px rgb(243 245 250 / 40%);
  text-stroke: 2px rgb(243 245 250 / 40%);
}
.gs-story-year img{
  max-width: 430px
}

.gs-story-word {
  font-size: clamp(96px, 7.04vw, 135px);
  position: relative;
}

.gs-story-text {
  max-width: min(445px, 30vw);
  margin: 0;
  color: rgb(243 245 250 / 88%);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.13;
}

.gs-story-text strong,
.gs-story-card--future strong {
  color: var(--gs-bg);
  font-weight: 700;
}

.gs-story-kicker {
  display: inline-block;
  color: var(--gs-bg);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

/* Asset dimensions: images/logos define the desktop article footprint. */

.gs-story-img--napoli {
  width: auto;
  height: clamp(300px, 20.84vw, 400px);
  border-radius: 13px;
  object-fit: cover;
}

.gs-story-img--ex-logo {
  width: clamp(170px, 12.5vw, 240px);
  margin-top: auto;
  margin-bottom: -20%;
}
.gs-story-logo--vultech {
  width: clamp(310px, 22.4vw, 430px);
}
.gs-story-img--case {
  width: clamp(320px, 24vw, 460px);
}
.gs-story-img--mouse {
  width: clamp(170px, 13.02vw, 250px);
}
.gs-story-img--keyboard {
  width: clamp(620px, 46.88vw, 900px);
}
.gs-story-img--ups {
  width: clamp(300px, 22.92vw, 440px);
}
.gs-story-logo--security {
  width: clamp(290px, 20.32vw, 390px);
  filter: brightness(0) invert(1);
}
.gs-story-img--cam {
  width: clamp(320px, 24vw, 460px);
}
.gs-story-img--nvr {
  width: clamp(390px, 29.69vw, 570px);
  margin-right: -90%;
}
.gs-story-img--team {
  width: clamp(560px, 42.19vw, 810px);
  border-radius: 10px;
  margin-left: -25%;
  z-index: -1;
}
.gs-story-logo--isiwi {
  width: clamp(220px, 15.63vw, 300px);
}
.gs-story-img--isiwi-cam {
  width: clamp(150px, 14.59vw, 280px);
}
.gs-story-img--isiwi-app {
  width: clamp(120px, 9.38vw, 180px);
}
.gs-story-img--family {
  width: clamp(410px, 31.25vw, 600px);
  border-radius: 10px;
}
.gs-story-img--evo {
  width: clamp(170px, 13.02vw, 220px);
  margin: auto 0;
  padding-top: 150px;
}
.gs-story-img--video {
  width: clamp(250px, 25vw, 450px);
}

/* Article flow details only. */

.gs-story-card--2008 .gs-story-year {
  margin-top: -8px;
}

.gs-story-media--ex-logo {
  margin-left: -15px;
  height: 100%;
}

@media (min-width: 992px) {
  .gs-story-card--vultech .gs-story-word--power {
    margin-left: 5%;
    position: absolute;
    bottom: -25%;
    left: 0;
  }
}

.gs-story-products-col--copy .gs-story-text {
  margin-bottom: auto;
}

.gs-story-products-col--keyboard .gs-story-year {
  margin-top: -45px;
}

.gs-story-products-col--ups {
  margin-block: auto;
}

.gs-story-media--nvr {
}

.gs-story-card--2019 .gs-story-card__body {
  padding-top: clamp(90px, 11vh, 140px);
}

.gs-story-card--2019 .gs-story-text,
.gs-story-card--2021 .gs-story-text,
.gs-story-card--2024 .gs-story-text {
  max-width: 390px;
}

.gs-story-media--isiwi-composition {
  position: relative;
  display: block;
}

.gs-story-media--isiwi-composition .gs-story-img--isiwi-app {
  position: absolute;
  top: -30%;
  right: 10%;
}

.gs-story-media--isiwi-composition .gs-story-img--isiwi-cam {
  position: absolute;
  left: -12%;
  bottom: -50%;
}

.gs-story-card--2021 .gs-story-card__body,
.gs-story-card--2024 .gs-story-card__body {
  /* padding-top: clamp(80px, 8vh, 130px); */
}

.gs-story-card--future {
  position: relative;
  padding: 0 150px;
  margin-top: -1px;
  border-top: 1px solid #136cc5;
  height: 100%;
  display: flex;
}

.gs-story-corner-line {
  position: absolute;
  display: block;
  width: clamp(110px, 12vw, 158px);
  height: clamp(140px, 15vw, 230px);
  border-left: 1px solid rgb(243 245 250 / 70%);
  border-bottom: 1px solid rgb(243 245 250 / 70%);
  top: 0%;
  left: -1px;
}

.gs-story-card--future .gs-story-card__body {
  padding-top: 0;
}

.gs-story-future-hero {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(390px, 27.08vw, 360px);
  aspect-ratio: 1;
}

.gs-story-card--future h2 {
  position: absolute;
  z-index: 2;
  color: var(--gs-bg);
  font-size: clamp(48px, 12vw, 70px);
  font-weight: 800;
  line-height: 0.92;
  text-shadow: 0 12px 13px rgb(2 7 17 / 24%);
  width: fit-content;
  top: 25%;
  white-space: nowrap;
  text-align: center;
}

.gs-story-card--future p {
  position: relative;
  z-index: 2;
  max-width: 420px;
  margin: 0;
  color: rgb(243 245 250 / 88%);
  font-size: 18px;
  line-height: 1.12;
}

.gs-story-rings {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 1px solid rgb(243 245 250 / 30%);
  border-radius: 999px;
}

.gs-story-rings::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64.04%;
  height: 64.04%;
  border: 1px solid rgb(243 245 250 / 38%);
  border-radius: inherit;
  transform: translate(-50%, -50%);
}

.gs-float-soft {
  animation: gs-story-float 5.4s ease-in-out infinite;
}

.gs-float-soft-reverse {
  animation: gs-story-float-reverse 6.2s ease-in-out infinite;
}

@keyframes gs-story-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -12px, 0) rotate(0.5deg);
  }
}

@keyframes gs-story-float-reverse {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, 10px, 0) rotate(-0.5deg);
  }
}

/* Desktop scale-down: images still define the footprint. */

@media (max-width: 1499.98px) and (min-width: 992px) {
  .gs-story-stage {
    /* padding-inline: 70px 130px; */
  }

  .gs-story-articles {
    gap: clamp(48px, 5.2vw, 92px);
  }

  .gs-story-text,
  .gs-story-card--future p {
    font-size: 16px;
  }
}

.gs-story-mobile {
  display: none;
}

/* Desktop scale-down: images still define the footprint. */
@media (min-width: 992px) {
  .gs-story-card--2008:before {
    content: '';
    display: block;
    background-color: #174ca9;
    width: 50%;
    height: 1px;
    position: absolute;
    top: -1px;
  }
  .gs-story-card--2008 .gs-story-dot {
    left: 45%;
  }
}

@media (max-width: 1499.98px) and (min-width: 992px) {
  .gs-story-stage {
    /* padding-inline: 70px 130px; */
  }

  .gs-story-articles {
    gap: clamp(54px, 5.6vw, 96px);
  }

  .gs-story-text,
  .gs-story-card--future p {
    font-size: 16px;
  }
}

/* < 992px: layout verticale separato ------------------------------------- */

@media (max-width: 991.98px) {
  .page-story .gs-story-hero {
    min-height: 360px !important;
    height: 360px;
  }

  .page-story .gs-story-hero h1 {
    max-width: 680px;
    font-size: 58px !important;
  }

  .gs-story-horizontal {
    display: none;
  }

  .gs-story-mobile {
    position: relative;
    display: block;
    overflow: hidden;
    padding-block: 72px 88px;
    background: linear-gradient(180deg, var(--gs-blue) 0%, var(--gs-blue-light) 100%);
  }

  .gs-story-mobile__inner {
    position: relative;
    display: grid;
    gap: 62px;
    width: min(100% - 40px, 520px);
  }

  .gs-story-mobile__line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 18px;
    width: 1px;
    background: rgb(243 245 250 / 58%);
  }

  .gs-story-mobile-card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    padding-left: 58px;
    color: var(--gs-bg);
    opacity: 0;
  }

  .gs-story-mobile-card.gs-story-card--2015{
    margin-top: 60px;
  }

  .gs-story-mobile-card.is-visible {
    opacity: 1;
  }

  .gs-story-mobile-card__dot {
    position: absolute;
    top: 18px;
    left: 6px;
    width: 25px;
    height: 25px;
    border: 1px solid rgb(243 245 250 / 48%);
    border-radius: 999px;
    box-shadow: 0 0 0 12px rgb(243 245 250 / 10%);
  }

  .gs-story-mobile-card__dot::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: inherit;
    background: var(--gs-red);
  }

  .gs-story-mobile-card__kicker {
    width: max-content;
    padding: 7px 10px;
    background: var(--gs-blue);
    line-height: 1;
  }

  .gs-story-mobile-card__year {
    color: transparent;
    font-size: 92px;
    line-height: 0.78;
    -webkit-text-stroke: 1px rgb(243 245 250 / 42%);
    text-stroke: 1px rgb(243 245 250 / 42%);
  }

  .gs-story-mobile-card__title {
    margin: -4px 0 0;
    line-height: 1.02;
  }

  .gs-story-mobile-card__text {
    margin: 0;
    color: rgb(243 245 250 / 90%);
    line-height: 1.18;
  }

  
  .gs-story-card--2015 .gs-story-mobile-card__text.second_text{
    width: 75%;
  }

  .gs-story-mobile-card__text strong,
  .gs-story-mobile-card--future strong {
    color: var(--gs-bg);
    font-weight: 700;
  }

  .gs-story-mobile-card__image {
    position: relative;
    width: min(100%, 250px);
    max-height: 220px;
    object-fit: contain;
    filter: drop-shadow(0 22px 22px rgb(2 7 17 / 24%));
  }

  .gs-story-mobile-card .gs-story-mobile-card__image.before_year {
    margin-bottom: -22%;
    margin-left: 15%;
    width: 85%;
    z-index: -1;
  }
  .gs-story-mobile-card .gs-story-mobile-card__image.before_second_text {
    margin-bottom: -22%;
    margin-left: 15%;
    width: 85%;
    z-index: -1;
  }
  .gs-story-card--vultech .gs-story-mobile-card__image--extra:nth-of-type(4) {
    justify-self: end !important;
    margin-top: -15%;
  }
  
  .gs-story-mobile-card.gs-story-card--2015 img.gs-story-mobile-card__image--extra:nth-of-type(2) {
    justify-self: end;
    margin-right: 15px;
    margin-top: -70px;
    width: 100%;
    z-index: 0;
  }
  .gs-story-mobile-card.gs-story-card--2015 img.gs-story-mobile-card__image--extra:nth-of-type(1) {
    transform: none !important;
    width: 50%;
    margin-top: -15%;
    margin-right: 5%;
    justify-self: end;
    z-index: 1;
  }
  .gs-story-mobile-card.gs-story-card--2015 img.gs-story-mobile-card__image--extra:nth-of-type(3) {
    margin-top: -12%;
    width: 60%;
    margin-left: 0%;
  }
  
  .gs-story-mobile-card.gs-story-card--isiwi img.gs-story-mobile-card__image--extra:nth-of-type(1) {
  justify-self: end;
  margin-right: 15px;
  width: 30%;
  z-index: 2;
  margin-top: -5%;
  }
  .gs-story-mobile-card.gs-story-card--isiwi img.gs-story-mobile-card__image--extra:nth-of-type(2) {
    transform: none !important;
    width: 95%;
    margin-top: -17%;
  }
  .gs-story-mobile-card.gs-story-card--isiwi img.gs-story-mobile-card__image--extra:nth-of-type(3) {
    margin-top: -33%;
    width: 50%;
    margin-left: -10%;
    justify-self: end;
  }  

  .gs-story-mobile-card.gs-story-card--vultech img.gs-story-mobile-card__image--extra:nth-of-type(3) {
    
justify-self: end;
  }
  .gs-story-mobile-card.gs-story-card--vultech img.gs-story-mobile-card__image--extra:nth-of-type(4) {
    width: 80%;
    position: absolute;
    left: -27%;
    bottom: -40px;
    transform: rotateZ(0deg) !important;
    max-width: unset;
    object-fit: unset;
    max-height: unset;
  }

  .gs-story-mobile-card.gs-story-card--2021 img.gs-story-mobile-card__image--extra:nth-of-type(1) {
    transform: none !important;
    object-fit: unset;
    max-height: unset;
    width: 50%;
    justify-self: center;
  }

  .gs-story-mobile-card.gs-story-card--2024 img.gs-story-mobile-card__image--extra:nth-of-type(1) {
    transform: none !important;
    object-fit: unset;
    max-height: unset;
    width: 80%;
    justify-self: center;
  }
  
  .gs-story-card--vultech .gs-story-mobile-card__image--extra {
      
  }
  .gs-story-mobile-card .gs-story-mobile-card__image.gs-story-mobile-card__image--extra {
  }
  .gs-story-mobile-card .gs-story-mobile-card__word {
    position: relative;
    font-size: clamp(96px, 7.04vw, 135px);
  }
  .gs-story-mobile-card:nth-of-type(2n) .gs-story-mobile-card__image {
    justify-self: start;
  }

  .gs-story-mobile-card:first-of-type .gs-story-mobile-card__image,
  .gs-story-mobile-card:nth-of-type(6) .gs-story-mobile-card__image {
    width: min(100%, 310px);
    border-radius: 12px;
    object-fit: cover;
  }
  .gs-story-card--2008.gs-story-mobile-card .gs-story-mobile-card__image:last-child {
    transform: none !important;
    overflow: visible;
    margin-top: -20%;
    width: 60%;
  }
  .gs-story-mobile-card img:(.gs-story-mobile-card__logo):nth-child(2n) {
    transform: rotateZ(-5deg) !important;
  }
  .gs-story-mobile-card:not(.gs-story-card--2015) img:not(.gs-story-mobile-card__logo):not(.gs-story-mobile-card__word):nth-child(2n-1):not(.gs-story-mobile-card__year img) {
    transform: rotateZ(4deg) !important;
  }

  .gs-story-mobile-card img.gs-story-mobile-card__logo {
    filter: invert(1);
    max-width: 80%;
  }

  .gs-story-mobile-card--future {
    min-height: 360px;
    place-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .gs-story-mobile-card--future .gs-story-rings-container {
    width: 330px;
    height: 330px;
  }

  .gs-story-mobile-card--future .gs-story-rings {
    inset: auto;
    top: 8px;
    left: 55%;
    width: 330px;
    height: 330px;
    transform: translateX(-50%);
  }

  .gs-story-mobile-card--future h2 {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: 42px;
    line-height: 0.94;
    text-shadow: 0 10px 12px rgb(2 7 17 / 24%);
  }

  .gs-story-mobile-card--future p {
    position: relative;
    z-index: 2;
    max-width: 320px;
    margin: 0;
    color: rgb(243 245 250 / 90%);
    font-size: 13px;
    line-height: 1.15;
  }
}
/* < 768px ---------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .page-story .gs-story-hero {
    height: 280px;
    min-height: 280px !important;
  }

  .page-story .gs-story-hero img {
    object-position: center center;
  }

  .page-story .gs-story-hero h1 {
    max-width: 330px;
    font-size: 32px !important;
    line-height: 0.98;
  }

  .page-story .gs-story-hero h1 + a {
    margin-top: 16px !important;
    font-size: 10px !important;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .gs-story-mobile {
    padding-block: 58px 74px;
  }
  .gs-story-mobile-card .gs-story-mobile-card__word {
    font-size: clamp(96px, 7.04vw, 135px);
  }

  .gs-story-mobile__inner {
    width: min(100% - 32px, 390px);
    gap: 52px;
  }

  .gs-story-mobile-card {
    gap: 14px;
    padding-left: 48px;
  }

  .gs-story-mobile__line {
    left: 15px;
  }

  .gs-story-mobile-card__dot {
    left: 3px;
  }

  .gs-story-mobile-card__year {
    font-size: 170px;
  }

  .gs-story-mobile-card__title {
    font-size: 20px !important;
  }

  .gs-story-mobile-card__text {
    font-size: 18px;
    line-height: normal;
  }

  .gs-story-mobile-card__image {
    width: min(100%, 210px);
    max-height: 190px;
  }

  .gs-story-mobile-card:first-of-type .gs-story-mobile-card__image,
  .gs-story-mobile-card:nth-of-type(6) .gs-story-mobile-card__image {
    width: min(100%, 260px);
  }

  .gs-story-mobile-card.gs-story-card--2015 img.gs-story-mobile-card__image--extra:nth-of-type(2) {
  }
  .gs-story-mobile-card.gs-story-card--2015 img.gs-story-mobile-card__image--extra:nth-of-type(1) {
  }
  .gs-story-mobile-card.gs-story-card--2015 img.gs-story-mobile-card__image--extra:nth-of-type(3) {
  }

  .gs-story-mobile-card--future {
    min-height: 330px;
  }

  .gs-story-mobile-card--future h2 {
    font-size: 36px;
  }

  .gs-story-mobile-card--future {
    
  }

  .gs-story-mobile-card--future .gs-story-rings {
    left: 55%;
  }

  .gs-story-mobile-card--future h2 {
    
  }

  .gs-story-mobile-card--future p {
    
  }
}

/* < 576px ---------------------------------------------------------------- */

@media (max-width: 575.98px) {
  
  .gs-story-mobile-card .gs-story-mobile-card__word {
    font-size: clamp(96px, 7.04vw, 135px);
  }
  .gs-story-mobile-card__year {
    font-size: 150px;
  }
  .gs-story-mobile-card__text {
    font-size: 16px;
  }

  .gs-story-mobile-card.gs-story-card--2015 img.gs-story-mobile-card__image--extra:nth-of-type(2) {
  }
  .gs-story-mobile-card.gs-story-card--2015 img.gs-story-mobile-card__image--extra:nth-of-type(1) {
  }
  .gs-story-mobile-card.gs-story-card--2015 img.gs-story-mobile-card__image--extra:nth-of-type(3) {
  }

  .gs-story-mobile-card--future {
    
  }

  .gs-story-mobile-card--future .gs-story-rings {
    left: 55%;
  }

  .gs-story-mobile-card--future h2 {
    margin-left: 0%;
  }

  .gs-story-mobile-card--future p {
    
  }
}

/* < 480px ---------------------------------------------------------------- */

@media (max-width: 479.98px) {
  .page-story .gs-story-hero {
    height: 282px;
    min-height: 282px !important;
  }

  .gs-story-mobile__inner {
    width: min(100% - 32px, 360px);
  }
  
  .gs-story-mobile-card .gs-story-mobile-card__word {    
    font-size: clamp(96px, 7.04vw, 135px);
  }

  .gs-story-mobile-card__year {
    font-size: 100px;
  }

  .gs-story-mobile-card__text {
    font-size: 14px;
  }

  .gs-story-mobile-card__image {
    width: min(100%, 185px);
    margin-top: 15px;
  }

  .gs-story-mobile-card:first-of-type .gs-story-mobile-card__image,
  .gs-story-mobile-card:nth-of-type(6) .gs-story-mobile-card__image {
    width: min(100%, 235px);
  }

  .gs-story-mobile-card.gs-story-card--2015 img.gs-story-mobile-card__image--extra:nth-of-type(2) {
  }
  .gs-story-mobile-card.gs-story-card--2015 img.gs-story-mobile-card__image--extra:nth-of-type(1) {
  }
  .gs-story-mobile-card.gs-story-card--2015 img.gs-story-mobile-card__image--extra:nth-of-type(3) {
  width: 80%;
  margin-top: -17%;
  margin-left: -11%;
  }

  .gs-story-mobile-card--future h2 {
    font-size: 32px;
  }

  .gs-story-mobile-card--future {
    
  }

  .gs-story-mobile-card--future .gs-story-rings-container {
    width: 260px;
    height: 260px;
  }
  .gs-story-mobile-card--future .gs-story-rings {
    width: 250px;
    height: 250px;
    left: 57%;
  }

  .gs-story-mobile-card--future h2 {
    
  }

  .gs-story-mobile-card--future p {
    padding: 0 15px;
  }
}

/* < 320px ---------------------------------------------------------------- */

@media (max-width: 319.98px) {
  .page-story .gs-story-hero {
    height: 260px;
    min-height: 260px !important;
  }

  .page-story .gs-story-hero h1 {
    max-width: 280px;
    font-size: 28px !important;
  }

  .gs-story-mobile__inner {
    width: min(100% - 24px, 296px);
    gap: 44px;
  }
  
  .gs-story-mobile-card .gs-story-mobile-card__word {
    position: relative;
    font-size: 65px;
    white-space: break-spaces;
    text-align: left;
    line-height: 70px;
    padding-left: 15px;
  }

  .gs-story-mobile-card {
    padding-left: 50px;
  }

  .gs-story-mobile__line {
    left: 12px;
  }

  .gs-story-mobile-card__dot {
    left: 0;
    width: 22px;
    height: 22px;
  }

  .gs-story-mobile-card__year {
    font-size: 100px;
  }

  .gs-story-mobile-card__title {
    font-size: 18px !important;
  }

  .gs-story-mobile-card__text {
    font-size: 14px !important;
  }

  .gs-story-mobile-card__image {
    width: min(100%, 160px);
  }

  .gs-story-mobile-card.gs-story-card--2015 img.gs-story-mobile-card__image--extra:nth-of-type(2) {
  }
  .gs-story-mobile-card.gs-story-card--2015 img.gs-story-mobile-card__image--extra:nth-of-type(1) {
  }
  .gs-story-mobile-card.gs-story-card--2015 img.gs-story-mobile-card__image--extra:nth-of-type(3) {
  width: 80%;
  margin-top: -17%;
  margin-left: -11%;
  }
  
  .gs-story-mobile-card--future {
    
  }

  .gs-story-mobile-card--future .gs-story-rings-container {
    width: 260px;
    height: 260px;
  }
  .gs-story-mobile-card--future .gs-story-rings {
    width: 250px;
    height: 250px;
    left: 53%;
  }

  .gs-story-mobile-card--future h2 {
    margin-left: -28px;
  }

  .gs-story-mobile-card--future p {
    padding-right: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gs-float-soft,
  .gs-float-soft-reverse,
  .gs-story-dot.is-active,
  .gs-story-mobile-card__dot.is-active {
    animation: none;
  }
}