.product-comparison-chart {
  .comparison-chart-table-container.color-scheme-1.gradient {
    border-radius: 2.4rem;
  }
  .comparison-chart-header {
    max-width: 90rem;
    margin: auto;
    h2 {
      margin: 0 0 2.1rem;
      font-size: 4.3rem;
      line-height: 1;
      letter-spacing: -0.3rem;
    }
    .description p {
      margin: 0 0 3.2rem;
      font-size: 2.2rem;
      line-height: normal;
    }
    .comparison-chart-product-images {
      display: flex;
      justify-content: end;
      gap: 12.35rem;
      display: none;
      img {
        height: 20rem;
        width: auto;
      }
    }
  }
  .comparison-chart-product-images {
    display: none;
  }
  .comparison-chart-table {
    width: 100%;
    margin-top: 3rem;
    padding: 1.5rem 2.5rem;
    border-radius: 2.4rem;
    tr {
      padding: 1.741rem 5rem 1.649rem;
      display: flex;
      justify-content: space-between;
    }
    tr:not(:last-of-type) {
      border-bottom: 1px solid #E5E5E5;
    }
    tr td:nth-child(1) {
      width: 66.8rem;
      font-size: 2rem;
      line-height: 1.2;
      letter-spacing: -0.06rem;
      padding: 0;
      min-height: 4.4rem;
      align-content: center;
    }
    tr td:nth-child(n + 2) {
      width: 21rem;
      display: flex;
      align-items: center;
      gap: 0.946rem;
      font-size: 1.6rem;
      line-height: 2.4rem;
      justify-content: center;
      svg {
        width: 2.4rem;
        height: 2.4rem;
      }
    }
  }
}

@media only screen and (max-width: 749px) {
  .product-comparison-chart {
    .comparison-chart-header {
      max-width: 100%;
      padding-inline: 0rem;
      h2 {
        margin: 0 0 2.4rem;
        font-size: 2.8rem;
      }
      .description p {
        margin: 0 0 4.6rem;
        font-size: 1.8rem;
      }
    }
    .comparison-chart-product-images {
      img {
        height: auto;
        width: 6.4rem;
      }

      > td:nth-of-type(1) {
       background-color: #f1f1f1 !important;
      }
    }
    .comparison-chart-table-container {
      position: relative;
      background-color: transparent;
    }
    .comparison-chart-table-container::after {
      content: "";
      width: 100%;
      height: 100%;
      background-color: rgb(var(--color-background));
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      border-radius: 2.4rem;
    }
    .comparison-chart-table {
      width: 100%;
      display: block;
      margin-top: 0;
      padding: 0 2.2rem 0.5rem;
      border-radius: 0;
      overflow-y: hidden;
      overflow-x: hidden;
      background: none;
      overflow-x: scroll;
      tr {
        padding: 0.9rem 0 1.1rem;
        gap: 1.0rem;
      }
      tr:not(:last-of-type) {
        width: auto;
      }
      tr td:nth-child(1) {
        background-color: #ffff;
        width: 18.3rem;
        min-width: 18.3rem;
        font-size: 1.4rem;
        letter-spacing: -0.07rem;
        min-height: 5.1rem;
        position: sticky;
        left: 0;
        z-index: 2;
      }
      tr td:nth-child(2),
      tr td:nth-child(3) {
       max-width: 12.5rem;
       padding: 0 .1rem;
      }
      tr > td:nth-child(2)  {
        justify-content: center;
      }
      tr td:nth-child(n + 2) {
        width: 17.2rem;
        gap: .5rem;
        font-size: 1.4rem;
      }
      tr.comparison-chart-product-images {
        padding-top: 0;
        padding-bottom: 1.4rem;
      }
    }
    .comparison-chart-table::-webkit-scrollbar {
      /* display: none; */
    }
  }
}

@supports selector(&) {
  @media (max-width: 749px) {
    .product-comparison-chart .comparison-chart-table {
      & tr, & td { border-bottom: 0 !important; }

      --first-col-w: 183px;
      --second-col-w: 172px;
      --scroll-x: 0px;

      & tbody > tr {
        position: relative;

        > td:first-child {
          position: sticky; left: 0; z-index: 2; background: #fff;
        }

        &:not(:last-child)::after {
          content: "";
          position: absolute; bottom: 0; left: 0;
          width: calc(var(--first-col-w) + var(--second-col-w));
          height: 1px; background: #E5E5E5;;
          transform: translateX(var(--scroll-x));
          pointer-events: none; z-index: 1;
        }
      }
    }
  }
}

@media (max-width: 749px){
  .comparison-chart-table-container::after{
    top: 0;
    height: 100%;
  }
}