/* Demo 7 Line 01-04: isolated two-image reveal. */
.demo7-line-media-card {
  opacity: 1;
  transform: none;
  transition: none;
}

.demo7-line-media-card.is-inview {
  opacity: 1;
  transform: none;
}

.demo7-line-media {
  background: #f1f1f1;
  isolation: isolate;
}

.demo7-line-media-frame {
  inset: 0;
  position: absolute;
}

.demo7-line-media-frame img {
  backface-visibility: hidden;
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate3d(0, 0, 0) scale(1.035);
  transition: opacity .8s ease, transform 1.15s cubic-bezier(.22, 1, .36, 1);
  width: 100%;
}

.demo7-line-media-frame.-second img {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(1.06);
}

.demo7-line-media-card:nth-child(n+3) .demo7-line-media-frame img {
  background: #fff;
  box-sizing: border-box;
  object-fit: contain;
  padding: 9%;
}

.demo7-line-media-card.is-inview .demo7-line-media-frame.-first img {
  transform: translate3d(0, 0, 0) scale(1);
}

.demo7-line-media-card.is-second .demo7-line-media-frame.-first img {
  opacity: 0;
  transform: translate3d(0, -12px, 0) scale(1.025);
}

.demo7-line-media-card.is-second .demo7-line-media-frame.-second img {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .demo7-line-media-card:hover .demo7-line-media-frame.-first img {
    opacity: 0;
    transform: translate3d(0, -12px, 0) scale(1.025);
  }

  .demo7-line-media-card:hover .demo7-line-media-frame.-second img {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (min-width: 769px) {
  .demo7-line3-fixed .demo7-line-media-frame img,
  .demo7-line3-fixed.is-inview .demo7-line-media-frame img,
  .demo7-line3-fixed.is-second .demo7-line-media-frame img {
    background: #fff;
    object-fit: cover !important;
    object-position: center;
    padding: 0 !important;
  }
}

@media (max-width: 768px) {
  .demo7-line-media-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .demo7-line-media-frame img {
    transition-duration: .85s, 1.05s;
  }

  .demo7-line-media-card:nth-child(4) .demo7-line-media-frame img {
    transform: translate3d(0, 0, 0) scale(.96);
  }

  .demo7-line-media-card:nth-child(4).is-second .demo7-line-media-frame.-first img {
    transform: translate3d(0, 0, 0) scale(.94);
  }

  .demo7-line-media-card:nth-child(4).is-second .demo7-line-media-frame.-second img {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .demo7-line-media-card:nth-child(3) .demo7-line-media-frame.-first {
    display: none;
  }

  .demo7-line-media-card:nth-child(3) .demo7-line-media-frame.-second img {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .demo7-line-media-card .demo7-line-media,
  .demo7-line-media-card:nth-child(4) .demo7-line-media {
    aspect-ratio: auto;
    background: transparent;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
    margin: 14px 4px 2px;
    max-width: calc(100% - 8px);
    overflow: visible;
    padding: 0;
    width: calc(100% - 8px);
  }

  .demo7-line-media-card:first-child .demo7-line-media {
    gap: 8px;
    margin-left: 4px;
    margin-right: 4px;
    max-width: calc(100% - 8px);
    width: calc(100% - 8px);
  }

  .demo7-line-media-card:first-child .demo7-line-media-frame {
    aspect-ratio: 1 / 1;
    border-radius: 10px;
  }

  .demo7-line-media-card .demo7-line-media-frame,
  .demo7-line-media-card:nth-child(4) .demo7-line-media-frame {
    aspect-ratio: 1;
    background: transparent;
    border: 0;
    border-radius: 10px;
    inset: auto;
    min-width: 0;
    overflow: hidden;
    position: relative;
  }

  .demo7-line-media-card:nth-child(3) .demo7-line-media-frame.-first {
    display: block;
  }

  .demo7-line-media-card .demo7-line-media-frame img,
  .demo7-line-media-card.is-second .demo7-line-media-frame img,
  .demo7-line-media-card:nth-child(3) .demo7-line-media-frame.-second img,
  .demo7-line-media-card:nth-child(4) .demo7-line-media-frame img,
  .demo7-line-media-card:nth-child(4).is-second .demo7-line-media-frame img {
    background: #fff;
    inset: 0;
    opacity: 1;
    padding: 0;
    position: absolute;
    transform: translate3d(0, 28px, 0) scale(.98);
  }

  .demo7-line-media-card.is-inview .demo7-line-media-frame img {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .demo7-line-media-card .demo7-line-media-frame.-first img {
    transition-delay: .08s;
  }

  .demo7-line-media-card .demo7-line-media-frame.-second img {
    transition-delay: .2s;
  }

  .demo7-line-media-card:nth-child(4) .demo7-line-media-frame {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .16);
    border-radius: 14px;
  }

  .demo7-line-media-card:nth-child(4) .demo7-line-media-frame img,
  .demo7-line-media-card:nth-child(4).is-inview .demo7-line-media-frame img {
    background: #fff;
    object-fit: contain;
    padding: 10%;
  }

  .demo7-line-media-card:nth-child(3) .demo7-line-media-frame {
    border: 0;
    border-radius: 10px;
  }

  .demo7-line-media-card:nth-child(3) .demo7-line-media-frame img,
  .demo7-line-media-card:nth-child(3).is-inview .demo7-line-media-frame img {
    background: #fff;
    border-radius: 10px;
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: center;
    opacity: 1 !important;
    padding: 0;
    width: 100%;
  }

  .demo7-line3-fixed .demo7-line-media-frame,
  .demo7-line3-fixed .demo7-line-media-frame.-first,
  .demo7-line3-fixed .demo7-line-media-frame.-second {
    aspect-ratio: 1;
    border-radius: 10px;
    height: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .demo7-line3-fixed .demo7-line-media-frame img,
  .demo7-line3-fixed .demo7-line-media-frame.-first img,
  .demo7-line3-fixed .demo7-line-media-frame.-second img,
  .demo7-line3-fixed.is-inview .demo7-line-media-frame img,
  .demo7-line3-fixed.is-second .demo7-line-media-frame img {
    border-radius: 10px;
    display: block;
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: center;
    opacity: 1 !important;
    padding: 0;
    position: absolute;
    transform: translate3d(0, 28px, 0) scale(.98) !important;
    transition: opacity .85s ease, transform 1.05s cubic-bezier(.22, 1, .36, 1) !important;
    width: 100%;
  }

  .demo7-line3-fixed.is-inview .demo7-line-media-frame img {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  .demo7-line3-fixed .demo7-line-media-frame.-first img {
    transition-delay: .08s !important;
  }

  .demo7-line3-fixed .demo7-line-media-frame.-second img {
    transition-delay: .2s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo7-line-media-card,
  .demo7-line-media-frame img {
    transition-duration: .01ms !important;
  }
}

/* Line 03 is OEM; Line 04 is ODM. Keep each media treatment with its content. */
.demo7-oem-card .demo7-line-media-frame.-first {
  display: block !important;
}

.demo7-oem-card .demo7-line-media-frame,
.demo7-oem-card .demo7-line-media-frame img {
  background: #fff !important;
  border-radius: 14px !important;
}

.demo7-oem-card .demo7-line-media-frame img,
.demo7-oem-card.is-inview .demo7-line-media-frame img,
.demo7-oem-card.is-second .demo7-line-media-frame img {
  object-fit: contain !important;
  object-position: center !important;
  padding: 10% !important;
}

.demo7-odm-card .demo7-line-media-frame,
.demo7-odm-card .demo7-line-media-frame img {
  border: 0 !important;
  border-radius: 10px !important;
}

.demo7-odm-card .demo7-line-media-frame img,
.demo7-odm-card.is-inview .demo7-line-media-frame img,
.demo7-odm-card.is-second .demo7-line-media-frame img {
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* Final Line 03 reset: use the exact two-frame behavior from Line 01. */
@media (min-width: 769px) {
  .demo7-oem-card .demo7-line-media {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, .16);
    border-radius: 14px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .demo7-oem-card .demo7-line-media-frame {
    background: transparent !important;
    display: block !important;
    inset: 0 !important;
    position: absolute !important;
  }

  .demo7-oem-card .demo7-line-media-frame img {
    display: block !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 10% !important;
    position: absolute !important;
    transition: opacity .8s ease, transform 1.15s cubic-bezier(.22, 1, .36, 1) !important;
    width: 100% !important;
  }

  .demo7-oem-card .demo7-line-media-frame.-first img {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  .demo7-oem-card .demo7-line-media-frame.-second img {
    opacity: 0 !important;
    transform: translate3d(0, 18px, 0) scale(1.06) !important;
  }

  .demo7-oem-card.is-second .demo7-line-media-frame.-first img {
    opacity: 0 !important;
    transform: translate3d(0, -12px, 0) scale(1.025) !important;
  }

  .demo7-oem-card.is-second .demo7-line-media-frame.-second img {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }
}

@media (max-width: 768px) {
  .demo7-oem-card .demo7-line-media {
    aspect-ratio: auto !important;
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    height: auto !important;
    margin: 14px 4px 2px !important;
    max-width: calc(100% - 8px) !important;
    overflow: visible !important;
    width: calc(100% - 8px) !important;
  }

  .demo7-oem-card .demo7-line-media-frame,
  .demo7-oem-card .demo7-line-media-frame.-first,
  .demo7-oem-card .demo7-line-media-frame.-second {
    aspect-ratio: 1 !important;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, .16) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    display: block !important;
    inset: auto !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .demo7-oem-card .demo7-line-media-frame img,
  .demo7-oem-card.is-second .demo7-line-media-frame img {
    display: block !important;
    height: 100% !important;
    inset: 0 !important;
    object-fit: contain !important;
    opacity: 1 !important;
    padding: 10% !important;
    position: absolute !important;
    transform: translate3d(0, 28px, 0) scale(.98) !important;
    width: 100% !important;
  }

  .demo7-oem-card.is-inview .demo7-line-media-frame img {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }
}

/* Line 03 OEM is isolated from old nth-child rules after swapping with Line 04. */
.demo7-oem-card .demo7-oem-pc {
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58% auto;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 14px;
  box-sizing: border-box;
  inset: 0;
  opacity: 1;
  overflow: hidden;
  position: absolute;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity .8s ease, transform 1.15s cubic-bezier(.22, 1, .36, 1);
}

.demo7-oem-card .demo7-oem-pc-image {
  display: block;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  padding: 10%;
  transition: opacity .32s ease;
  width: 100%;
}

.demo7-oem-card .demo7-oem-pc.is-fading {
  opacity: 0;
  transform: translate3d(0, -12px, 0) scale(1.025);
}

.demo7-oem-card .demo7-oem-mobile-frame {
  display: none !important;
}

@media (max-width: 768px) {
  .demo7-oem-card .demo7-oem-pc {
    display: none !important;
  }

  .demo7-oem-card .demo7-oem-mobile-frame,
  .demo7-oem-card .demo7-oem-mobile-frame.-first,
  .demo7-oem-card .demo7-oem-mobile-frame.-second {
    border: 1px solid rgba(0, 0, 0, .16) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    display: block !important;
  }
}