.lx-variant-compare{
  --gap: 64px;
  --heading-mb: 64px;
  --subheading-mb: 16px;
  --image-w: 382px;
  --image-h: 147px;
  --banner-w: 810px;
  --banner-h: 533px;

  @media (width <= 1024px){
    --heading-mb: 56px;
    --gap:32px;
    --image-w: 210px;
    --image-h: 80px;
    --banner-w: 564px;
    --banner-h: 390px;
  }
  @media (width <= 767px){
    --heading-mb: 32px;
    --banner-w: 100%;
    --banner-h: 254px;
  }
  .lx-compare-heading{
    text-align: center;
    margin-bottom: var(--heading-mb,64px);
    .lx-compare-subheading{
      margin-bottom: var(--subheading-mb,16px);
    }
  }
  .lx-layout-wrap{
    display: grid ;
    grid-template-columns: 3.6fr 6.4fr;
    gap: var(--gap);
    @media (width <= 767px){
      grid-template-columns: 1fr;
      .lx-layout-right{
        order: -999;
      }
    }
    .lx-layout-left-inner{
      display: flex;
      align-items: center;
      flex-direction: column;
      height: 100%;
      justify-content: center;
    }
    .lx-image-group,
    .lx-name-group,
    .lx-banner-group,
    .lx-description-group{
      position: relative;
      [data-handle],
      .lx-placeholder{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        opacity: 0;
        text-align: center;
        pointer-events: none;
        &[active]{
          position: static;
          opacity: 1;
          pointer-events: auto;
        }
      }
    }
  }
  /* css for variant button color */
  .lx-variant-color-group{
    --swatch-w: 40px;
    --swatch-h: 40px;
    --swatch-padding: 4px;
    --gap-btn: 16px;
    @media (width <= 1024px){
      --swatch-w: 32px;
      --swatch-h: 32px;
    }

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--gap-btn);
    margin-top: var(--mt-btn,40px);
    @media (width <= 767px){
      --mt-btn: 32px;
      --gap-btn: 12px;
    }
    button{
      width: var(--swatch-w);
      height: var(--swatch-h);
      border-radius: 100%;
      padding: var(--swatch-padding);
      border: 1px solid transparent;
      &[active]{
        border-color: #000;
      }
      span { 
        background-image: var(--hdt-bg-image);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        height: 100%;
        border-radius: 100%;
        display: block;
      }
    }
  }

  .lx-banner-group{
    width: var(--banner-w,100%);
    height: var(--banner-h,533px);
    .lx-variant-banner{
      height: 100%;
    }
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .lx-image-group{
    margin-bottom: 4rem;
    margin-inline: auto;
    width: var(--image-w,100%);
    /* aspect-ratio: var(--image-ratio,1.6); */
    height: var(--image-h,147px);
    @media (width <= 767px){
      margin-bottom: 32px;
    }
    .lx-variant-img{
      height: 100%;
    }
    img{
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
  .lx-name-group{
    text-align: center;
    width: min(526px,100%);
    margin-bottom: 16px;
    max-width: 52rem;
    @media (width <= 767px){
      width: calc(100vw - 30px);
    }
  }
  .lx-description-group{
    text-align: center;
    *{
      width: fit-content;
      margin-inline: auto;
    }
  }
  .lx-control-group{
    display: grid;
    grid-template-columns: 1fr 32px 32px;
    align-items: center;
    gap: 24px;
    margin-top: var(--heading-mb);
    @media (width <= 767px){
      grid-template-columns: 1fr;
      .lx-control-btn{
        display: none;
      }
    }
    .lx-progress-bar{
      position: relative;
      width: 100%;
      height: 3px;
      background: #CCCCCC;
      span { 
        position: absolute;
        left: 0;
        top: 0;
        background: #000;
        height: 100%;
        width: var(--width,100%);
        transition: width 0.3s ease;
      }
    }
  }
  .hdt-rte :where(:not(meta, span) + *){
    margin-block-start: 0.8rem;
  }

}