/*   Timeless css    */

/* ================ */
/*  Timeless */
/* ================ */

#lp_timeless {
  position: relative;
  z-index: 0;
  --gap: var(--product-list-calculated-column-gap);
  .collection__main {
    display: block;
  }
  .product-list {
    grid-template-columns: repeat(4, 1fr);
    row-gap: var(--product-list-calculated-column-gap);
    margin-bottom: var(--product-list-calculated-column-gap);
    @media screen and (max-width: 999px) {
    }
    @media screen and (max-width: 699px) {
      grid-template-columns: repeat(2, 1fr);
      row-gap: var(--product-list-calculated-row-gap);
      margin-bottom: var(--product-list-calculated-row-gap);
    }

    &.type_b {
      .product-card {
        &.item1 { grid-area: 1 / 1 / 3 / 3; }
        &.item2 { grid-area: 1 / 3 / 2 / 4; }
        &.item3 { grid-area: 1 / 4 / 2 / 5; }
        &.item4 { grid-area: 2 / 3 / 3 / 4; }
        &.item5 { grid-area: 2 / 4 / 3 / 5; }
        @media screen and (max-width: 699px) {
          &.item1 { grid-area: auto;grid-column: span 2; }
          &.item2 { grid-area: auto; }
          &.item3 { grid-area: auto; }
          &.item4 { grid-area: auto; }
          &.item5 { grid-area: auto; }
        }
      }
    }

    &.type_c {
      .product-card {
        &.item1 { grid-area: 1 / 1 / 2 / 2; }
        &.item2 { grid-area: 1 / 2 / 2 / 3; }
        &.item3 { grid-area: 2 / 1 / 3 / 2; }
        &.item4 { grid-area: 2 / 2 / 3 / 3; }
        &.item5 { grid-area: 1 / 3 / 3 / 5; }
        @media screen and (max-width: 699px) {
          &.item1 { grid-area: auto; }
          &.item2 { grid-area: auto; }
          &.item3 { grid-area: auto; }
          &.item4 { grid-area: auto; }
          &.item5 { grid-area: auto;grid-column: span 2; }
        }
      }
    }

    &.type_d {
      grid-template-columns: repeat(2, 1fr);
      @media screen and (max-width: 699px) {
        grid-template-columns: repeat(1, 1fr);
      }
    }

    &.type_e {
      grid-template-columns: repeat(1, 1fr);
      .item__media {
        aspect-ratio: 3 / 2;
      }
    }

    .product-card {
      position: relative;
      &:hover {
        z-index: 9;
      }
      a:hover {
        .item__media {
          border-color: #000;
        }
        .item__media.has-two-images {
          img.img1 {
            opacity: 0;
          }
        }
        .product-card__info {
          opacity: 1;
        }
      }
    }
    .item__media {
      position: relative;
      width: 100%;
      aspect-ratio: 3 / 4;
      border: 1px solid transparent;
      transition: 0.3s;
      img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
        &.img1 {
          z-index: 1;
          transition: 0.3s;
        }
      }
    }
    .product-card__info {
      display: block;
      position: absolute;
      top: calc(100% + 14px);
      left: 2px;
      line-height: 1;
      z-index: 1;
      transition: 0.3s;
      opacity: 0;
      .product-title {
        margin-bottom: 6px;
        font-size: 14px;
      }
      .text-subdued {
        font-size: 14px;
      }
      @media screen and (max-width: 699px) {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        justify-items: start;
        margin-top: 10px;
        opacity: 1;
      }
    }
  }
}

@media screen and (max-width: 699px) {
}