.product-page-extended{
  
  .cstm-variant-section-ext{

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 50px;

    @media screen and (min-width: 1024px) {
      grid-template-columns: repeat(8, 1fr);

    }
    
    .variant-container-x{
      border: 2px solid #f5f5f5;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding:5px;
      gap: 5px;

      figure.lazy-image{
        width: 100%;
        height: 100%;

        img{
          position: relative;
        }
      } 

      .variant-details-x{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 5px;

        span{
          width: 100%;
          text-align: start;
          font-size: 10px;
          line-height: normal;
          @media screen and (min-width: 768px) {
            font-size: 12px;
          }
        }
        .variant-price-x{
          width: 100%;
          text-align: start;
          color: #e32619;
          font-size: 10px;
          display: flex;
          justify-content: start;
          align-items: center;
          gap: 5px;
          margin-top: 2px;
          @media screen and (min-width: 768px) {
            margin-top: 5px;
            font-size: 12px;
          }

          span{
            width: fit-content;
          }

          .old-price{
            text-decoration: line-through;
          }
        }
      }

      .atc-action-wrapper{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        margin-top: 5px;

        .order-input-quantity {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            margin: 5px auto;
            gap: 2px;

          .decrement, 
          .increment {
            width: calc(100% / 4);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: buttonface;
            border: 1px solid #d0d0d0;
            border-radius: 2px;
            font-size: 10px;

            @media screen and (min-width: 768px) {
              border: 2px solid #d0d0d0;
              font-size: 14px;
            }
          }
          .qtt-input {
            width: calc(100% / 2);
            text-align: center;
            padding: 0;
            font-size: 14px;
            border: 1px solid #d0d0d0;
            border-radius: 2px;
            font-size: 10px;

            @media screen and (min-width: 768px) {
              border: 2px solid #d0d0d0;
              font-size: 14px;
            }
          }
          
        }

      }
      .cstm-special-temp-atc{
        background-color: #e32619;
        padding: 2px 0;
        transition: background-color 0.1s ease 0.1s;
        &:hover{
          background-color: #ec4f45;
        }
        span{
          color: #fff;
          font-size: 12px;

          @media screen and (min-width: 768px) {
            font-size: 16px;
          }
        }
      }




    }


  }
}