/* TOP page: fixed latest works and an editorial infinite life gallery below NEWS. */

body.page-home .works__marquee--lower {
  padding-right: 54px !important;
}

body.page-home .works__marquee--lower::before,
body.page-home .works__marquee--lower::after {
  display: none !important;
}

body.page-home .works__cards {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  height: 361px !important;
  gap: 24px !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

body.page-home .work-card,
body.page-home .work-card:nth-child(n) {
  width: 100% !important;
  min-width: 0 !important;
}

body.page-home .life-gallery {
  position: absolute;
  inset: 3875px 0 auto;
  height: 420px;
  overflow: hidden;
  color: #263e4d;
  background: #fff;
}

body.page-home .life-gallery__viewport {
  position: absolute;
  inset: 20px 0;
  overflow: hidden;
}

body.page-home .life-gallery__track {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: 100%;
  height: 100%;
  gap: 54px;
  animation: life-gallery-marquee 68s linear infinite;
  will-change: transform;
}

body.page-home .life-gallery__group {
  display: flex;
  flex: none;
  align-items: center;
  height: 100%;
  gap: 54px;
}

body.page-home .life-gallery__item {
  flex: none;
  width: 380px;
  height: 278px;
  margin: 0;
  overflow: hidden;
  background: #f4f1eb;
  box-shadow: 0 18px 42px rgba(60, 70, 72, .075);
}

body.page-home .life-gallery__item--wide {
  width: 430px;
  height: 296px;
}

body.page-home .life-gallery__item--large {
  width: 500px;
  height: 334px;
}

body.page-home .life-gallery__item--portrait {
  width: 234px;
  height: 356px;
}

body.page-home .life-gallery__item:nth-child(3n + 2) {
  transform: translateY(42px);
}

body.page-home .life-gallery__item:nth-child(4n) {
  transform: translateY(-30px);
}

body.page-home .life-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-home .life-gallery__item--portrait img {
  object-position: 50% 44%;
}

@keyframes life-gallery-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - 27px), 0, 0); }
}

@media (max-width: 767px) {
  body.page-home .works__marquee--lower {
    padding-right: 0 !important;
    overflow: visible !important;
  }

  body.page-home .works__cards {
    display: flex !important;
    width: calc(100% + 40px) !important;
    height: auto !important;
    gap: 16px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
  }

  body.page-home .work-card,
  body.page-home .work-card:nth-child(n) {
    flex: 0 0 min(78vw, 316px) !important;
    width: min(78vw, 316px) !important;
  }

  body.page-home .stage > .life-gallery,
  body.page-home .life-gallery {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0 0 44px;
    overflow: hidden;
    background: #fcfbf8;
  }

  body.page-home .life-gallery__viewport {
    position: relative;
    inset: auto;
    height: 285px;
    margin-top: 0;
  }

  body.page-home .life-gallery__track,
  body.page-home .life-gallery__group {
    gap: 22px;
  }

  body.page-home .life-gallery__track {
    animation-duration: 48s;
  }

  body.page-home .life-gallery__item,
  body.page-home .life-gallery__item--wide,
  body.page-home .life-gallery__item--large {
    width: 286px;
    height: 210px;
  }

  body.page-home .life-gallery__item--portrait {
    width: 150px;
    height: 242px;
  }

  body.page-home .life-gallery__item:nth-child(3n + 2) {
    transform: translateY(30px);
  }

  body.page-home .life-gallery__item:nth-child(4n) {
    transform: translateY(-20px);
  }

  @keyframes life-gallery-marquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-50% - 11px), 0, 0); }
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  body.page-home .life-gallery__track,
  body.page-home .life-gallery__group {
    gap: 42px;
  }

  @keyframes life-gallery-marquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-50% - 21px), 0, 0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .life-gallery__viewport {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  body.page-home .life-gallery__track {
    animation: none !important;
  }

  body.page-home .life-gallery__group[aria-hidden="true"] {
    display: none;
  }
}