.product-content-hero {
  @media (max-width: 1024px) {
    margin-top: 40px;
  }
  @media (max-width: 576px) {
    margin-top: 20px;
  }
  .container {
    width: 1250px;
    display: flex;
    gap: 50px;
    align-items: flex-start;
    @media (max-width: 1440px) {
      width: 1120px;
    }
    @media (max-width: 1280px) {
      width: 1005px;
    }
    @media (max-width: 1024px) {
      width: auto;
      flex-direction: column;
      align-items: center;
      margin: 0 20px;
    }
    .product-content-hero-left {
      flex: 1;
      @media (max-width: 1024px) {
        width: 70%;
        margin-bottom: 40px;
      }
      @media (max-width: 768px) {
        width: 100%;
      }
      h2 {
        margin-bottom: 32px;
        color: var(--c-primary-200);
        @media (max-width: 1440px) {
          margin-bottom: 28px;
          letter-spacing: -4px;
        }
        @media (max-width: 1024px) {
          letter-spacing: 0px;
        }
      }
    }
    .product-content-hero-right {
      width: 526px;
      @media (max-width: 1280px) {
        width: 466px;
      }
      @media (max-width: 576px) {
        width: 100%;
      }
      figure {
        position: relative;
        margin-bottom: 60px;
        padding-top: 68%;
        @media (max-width: 1440px) {
          margin-bottom: 50px;
        }
        @media (max-width: 1280px) {
          margin-bottom: 40px;
        }
        img {
          position: absolute;
          filter: drop-shadow(1.63px 1.86px 5.58px #0000000d) drop-shadow(6.28px 7.68px 10px #0000000a) drop-shadow(14.19px 17.44px 13.49px #00000008) drop-shadow(25.12px 30.93px 15.82px #00000003) drop-shadow(39.08px 48.38px 17.44px #00000000);
          &:nth-of-type(1) {
            top: 0;
            left: 0;
            z-index: 4;
            @media (max-width: 1280px) {
              width: 250px;
            }
            @media (max-width: 576px) {
              width: 50%;
              left: 4%;
            }
          }
          &:nth-of-type(2) {
            top: -70px;
            left: 140px;
            z-index: 3;
            @media (max-width: 1280px) {
              width: 260px;
              top: -60px;
              left: 120px;
            }
            @media (max-width: 576px) {
              width: 50%;
              left: 50%;
              transform: translateX(-50%);
            }
          }
          &:nth-of-type(3) {
            top: 40px;
            left: 250px;
            z-index: 2;
            @media (max-width: 1280px) {
              width: 230px;
              left: 230px;
            }
            @media (max-width: 576px) {
              width: 50%;
              left: auto;
              right: 4%;
            }
          }
        }
        .grid-pattern {
          position: absolute;
          left: 0;
          bottom: 0;
          z-index: 1;
          @media (max-width: 1280px) {
            width: 466px;
            height: 286px;
          }
          @media (max-width: 576px) {
            width: auto;
            height: 256px;
            left: -20px;
            right: -20px;
            border-radius: 0;
            &:before {
              display: none;
            }
          }
        }
      }
      .cta {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 60px;
        @media (max-width: 1440px) {
          margin-bottom: 50px;
        }
        @media (max-width: 1024px) {
          justify-content: center;
          margin-bottom: 70px;
        }
      }
      .tip {
        display: flex;
        width: 470px;
        transform: translateX(-70px);
        @media (max-width: 1280px) {
          transform: translateX(-120px);
        }
        @media (max-width: 1024px) {
          width: 300px;
          margin: 0 auto;
          transform: none;
        }
        p {
          flex: 1;
        }
        svg {
          width: 56px;
          transform: translateY(-58%);
          @media (max-width: 1024px) {
            width: 36px;
          }
        }
        &.desktop {
          @media (max-width: 1024px) {
            display: none;
          }
        }
        &.mobile {
          display: none;
          @media (max-width: 1024px) {
            display: flex;
            justify-content: center;
          }
        }
      }
    }
  }
}