.ef-collage {
  --ef-h: clamp(380px, 30vw, 600px);
  --ef-gap: 10px;
  --ef-r: 20px;
  --ef-dark: #011223;
  position: relative;
  padding: 0 0 4em;
  background: rgb(232, 244, 255);
}

.ef-collage .ef-collage__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  padding: 64px 10% 44px 15%;
  text-align: left;
}

.ef-collage .ef-collage__title {
  margin: 0;
  font-size: clamp(36px, 3.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ef-dark);
}

.ef-collage .ef-collage__text {
  margin: 0;
  padding-top: .4em;
  font-size: 18px;
  line-height: 1.45;
  color: rgba(1, 18, 35, .75);
}

.ef-collage .ef-collage__layout--mob {
  display: none;
}

.ef-collage .swiper {
  padding: 0;
  overflow: hidden;
}

.ef-collage .swiper-slide {
  display: block;
  height: var(--ef-h);
}

.ef-collage .swiper-slide:first-child {
  margin-left: 0;
}

.ef-collage .swiper-slide.is-sq {
  width: var(--ef-h);
}

.ef-collage .swiper-slide.is-tall,
.ef-collage .swiper-slide.is-stack {
  width: calc((var(--ef-h) - var(--ef-gap)) / 2);
}

.ef-collage .swiper-slide.is-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--ef-gap);
}

.ef-collage .ef-tile {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: var(--ef-r);
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  background: #dae4ee;
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.ef-collage .ef-tile img,
.ef-collage .ef-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

.ef-collage .ef-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .12) 30%, rgba(0, 0, 0, 0) 55%);
  opacity: .85;
  transition: opacity .4s ease;
}

.ef-collage .ef-cart {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 44px;
  max-width: 44px;
  border-radius: 999px;
  background: var(--ios-blue, #007aff);
  box-shadow: none;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: max-width .45s cubic-bezier(.2, .8, .2, 1);
}

.ef-collage .ef-cart__icon {
  order: -1;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10L15 4M21 10H3M21 10L19.6431 16.7845C19.2692 18.6542 17.6275 20 15.7208 20H8.27922C6.37249 20 4.73083 18.6542 4.35689 16.7845L3 10M3 10L9 4' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.ef-collage .ef-cart__text {
  padding-right: 18px;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s ease .05s, transform .3s cubic-bezier(.2, .8, .2, 1);
}

@media (hover: hover) {
  .ef-collage .ef-tile:hover img,
  .ef-collage .ef-tile:hover video {
    transform: scale(1.05);
  }

  .ef-collage .ef-tile:hover::after {
    opacity: 1;
  }

  .ef-collage .ef-tile:hover .ef-cart {
    max-width: 240px;
  }

  .ef-collage .ef-tile:hover .ef-cart__text {
    opacity: 1;
    transform: none;
  }
}

.ef-collage .ef-tile:focus-visible {
  outline: none;
}

.ef-collage .ef-tile:focus-visible .ef-cart {
  max-width: 240px;
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.ef-collage .ef-tile:focus-visible .ef-cart__text {
  opacity: 1;
  transform: none;
}

@media (max-width: 849px) {
  .ef-collage {
    --ef-r: 16px;
    --ef-gap: 8px;
    padding-bottom: 3em;
  }

  .ef-collage .ef-collage__layout--desk {
    display: none;
  }

  .ef-collage .ef-collage__layout--mob {
    display: block;
  }

  .ef-collage {
    --ef-h: min(calc(84vw + var(--ef-gap)), 620px);
  }

  .ef-collage .ef-cart {
    display: none;
  }

  .ef-collage .ef-collage__head {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 40px 16px 24px;
  }

  .ef-collage .ef-collage__title {
    font-size: 30px;
  }

  .ef-collage .ef-collage__text {
    padding-top: 0;
    font-size: 16px;
  }
}

.ef-collage.ef-anim:not(.is-done) .ef-collage__title,
.ef-collage.ef-anim:not(.is-done) .ef-collage__text {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform 1s cubic-bezier(.2, .8, .2, 1);
}

.ef-collage.ef-anim:not(.is-done) .ef-collage__text {
  transition-delay: .12s;
}

.ef-collage.ef-anim:not(.is-done) .swiper-slide {
  --d: calc(min(var(--i, 0), 7) * 90ms + 200ms);
  opacity: 0;
  transform: translateY(70px);
  transition: opacity .6s ease var(--d), transform 1.1s cubic-bezier(.2, .8, .2, 1) var(--d);
}

.ef-collage.ef-anim:not(.is-done) .ef-tile {
  clip-path: inset(100% 0 0 0 round var(--ef-r));
  transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1) var(--d);
}

.ef-collage.ef-anim:not(.is-done) .is-stack .ef-tile:nth-child(2) {
  transition-delay: calc(var(--d) + 120ms);
}

.ef-collage.ef-anim:not(.is-done) .ef-tile img,
.ef-collage.ef-anim:not(.is-done) .ef-tile video {
  transform: scale(1.3);
  transition: transform 1.6s cubic-bezier(.2, .8, .2, 1) var(--d);
}

.ef-collage.ef-anim:not(.is-done) .ef-cart {
  opacity: 0;
  transform: scale(.4);
  transition: opacity .4s ease calc(var(--d) + .7s), transform .6s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d) + .7s);
}

.ef-collage.ef-anim.is-in .ef-collage__title,
.ef-collage.ef-anim.is-in .ef-collage__text,
.ef-collage.ef-anim.is-in .swiper-slide {
  opacity: 1;
  transform: none;
}

.ef-collage.ef-anim.is-in .ef-tile {
  clip-path: inset(0 0 0 0 round var(--ef-r));
}

.ef-collage.ef-anim.is-in .ef-tile img,
.ef-collage.ef-anim.is-in .ef-tile video {
  transform: scale(1);
}

.ef-collage.ef-anim.is-in .ef-cart {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ef-collage .ef-tile img,
  .ef-collage .ef-tile video,
  .ef-collage .ef-cart,
  .ef-collage .ef-cart__text {
    transition: none;
  }

  .ef-collage .ef-tile:hover img,
  .ef-collage .ef-tile:hover video {
    transform: none;
  }
}

.ef-collage .ef-tile,
.ef-collage .ef-tile img,
.ef-collage .ef-tile video {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

.ef-collage .ef-tile img,
.ef-collage .ef-tile video {
  pointer-events: none;
}

@media (max-width: 849px) {
  .ef-collage .ef-collage__layout--mob .swiper {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-left: 16px;
    touch-action: pan-x pan-y;
  }

  .ef-collage .ef-collage__layout--mob .swiper::-webkit-scrollbar {
    display: none;
  }

  .ef-collage .ef-collage__layout--mob .swiper-wrapper {
    display: flex;
    gap: var(--ef-gap);
    width: max-content;
    height: auto;
    padding: 0 16px;
    transform: none;
  }

  .ef-collage .ef-collage__layout--mob .swiper-slide {
    flex: 0 0 auto;
    margin: 0;
    scroll-snap-align: start;
  }

  .ef-collage .ef-collage__layout--mob .ef-tile {
    transform: none;
    isolation: auto;
  }

  .ef-collage .ef-collage__layout--mob .ef-tile::after {
    transition: none;
  }
}