.how-use {
  .container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;

    @media (max-width: 1024px) {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .how-use_left {
      .section-title {
        font-size: var(--fs-3xl);
        letter-spacing: -2px;
        margin-bottom: 26px;
        @media (max-width: 1024px) {
          font-size: 56px;
        }
      }
      .text {
        margin-bottom: 50px;
        max-width: 580px;
        @media (max-width: 1024px) {
          margin-bottom: 32px;
        }
      }
      .fibbl_lists {
        @media (max-width: 1024px) {
          position: relative;
          order: 3;
          width: 100vw;
          border-top: 1px solid var(--c-black);
          border-bottom: 1px solid var(--c-black);
          margin-inline: -20px;
          left: 0;
          padding: 12px 40px;
        }
      }
    }
    .how-use_right {
      .figure-wrapper {
        /* @media (max-width: 1024px) {
          overflow-x: auto;
          width: 100vw;
          margin-inline: -20px;
          padding-inline: 20px;
        } */
      }
      figure {
        margin-left: auto;
        width: 432px;
        height: 266px;
        margin-bottom: 32px;
        margin-right: 60px;
        @media (max-width: 1024px) {
          display: flex;
          width: auto;
          height: 220px;
          gap: 24px;
          margin-bottom: 20px;
        }
        .image-wrapper {
          position: absolute;
          transition: all 0.8s ease;

          &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-color: #ffd672;
            opacity: 0.12;
            pointer-events: none;
            z-index: 2;
            border-radius: 20px;
            transition: all 0.3 ease;
          }

          &:nth-child(1) {
            z-index: 2;
          }
          &:nth-child(2) {
            transform: translate(26px, 26px);
            z-index: 1;
          }
          &:nth-child(3) {
            transform: translate(52px, 52px);
          }

          img {
            filter: grayscale(100%);
            border: 1px solid var(--c-black);
            border-radius: 33px;
            overflow: hidden;
            width: 380px;
            height: 214px;
            transition: all 0.3s ease;
            box-shadow: 0px;
            @media (max-width: 1024px) {
              width: 100%;
              height: auto;
            }
          }
        }
      }
      .cta {
        text-align: right;
        margin-right: 60px;
        @media (max-width: 1024px) {
          text-align: center;
          margin-right: 0;
        }
      }
    }
    &:hover {
      .how-use_right {
        figure {
          .image-wrapper {
            &::after {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              width: 100%;
              height: 100%;
              background-color: #ffd672;
              opacity: 0;
              pointer-events: none;
              z-index: 2;
              border-radius: 20px;
              transition: all 0.3 ease;
            }
            &:nth-child(1) {
              transform: translate(-30px, -120px) rotate(-30deg);
            }
            &:nth-child(2) {
              transform: translate(20px, -60px) rotate(-16deg);
            }
            &:nth-child(3) {
              transform: translate(30px, 50px) rotate(10deg);
            }
            img {
              filter: grayscale(0);
              border-color: transparent;
              box-shadow: 1.63px 1.86px 5.58px 0px #0000000d, 6.28px 7.68px 10px 0px #0000000a, 14.19px 17.44px 13.49px 0px #00000008, 25.12px 30.93px 15.82px 0px #00000003, 39.08px 48.38px 17.44px 0px #00000000;
            }
          }
        }
      }
    }
  }
}