input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .wrapper-section2 {
    background: none, linear-gradient(to bottom, #FFFFFF 80%, #FEF8F8 86%);
  }

  .wrapper-section4 {
    object-position: center;
    background: url('./../../assets/section4-bg--mobile.png') no-repeat 46% 46rem / 7rem, linear-gradient(to bottom, #FEF8F8 80%, #FFFFFF 79%);
  }

  .wrapper-section5,
  .col-parent2 {
    object-position: center;
    background: none;
  }

  .left {
    box-shadow: -51px 35px 35px 19px rgba(233, 230, 230, 60%);
    background-image: linear-gradient(145deg,
        hsl(2deg 88% 81%) 0%,
        hsl(2deg 84% 80%) 9%,
        hsl(2deg 81% 79%) 18%,
        hsl(2deg 78% 78%) 27%,
        hsl(2deg 75% 77%) 36%,
        hsl(2deg 73% 76%) 45%,
        hsl(2deg 71% 75%) 55%,
        hsl(2deg 68% 74%) 64%,
        hsl(2deg 66% 73%) 73%,
        hsl(3deg 65% 73%) 82%,
        hsl(3deg 63% 72%) 91%,
        hsl(3deg 61% 71%) 100%);
  }

  .right {
    box-shadow: -51px 35px 35px 19px rgba(233, 230, 230, 78%);
    background-image: linear-gradient(145deg,
        hsl(2deg 88% 81%) 0%,
        hsl(2deg 84% 80%) 9%,
        hsl(2deg 81% 79%) 18%,
        hsl(2deg 78% 78%) 27%,
        hsl(2deg 75% 77%) 36%,
        hsl(2deg 73% 76%) 45%,
        hsl(2deg 71% 75%) 55%,
        hsl(2deg 68% 74%) 64%,
        hsl(2deg 66% 73%) 73%,
        hsl(3deg 65% 73%) 82%,
        hsl(3deg 63% 72%) 91%,
        hsl(3deg 61% 71%) 100%);
  }

  .contents__tools {
    object-fit: cover;
    object-position: center;
    height: 19rem;
    background-position: 100% 75px;
    /* Center the image */
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-size: auto;
    /* Resize the background image to cover the entire container */
    background-image: url("./../../assets/section3-mini.png");
  }

  .swiper-button-next,
  .swiper-button-prev {
    position: static !important;
    width: 100px !important;
    display: block;
    height: auto !important;
    margin-top: 0 !important;
  }

  .swiper-button-next:after,
  .swiper-button-prev::after {
    content: ' ' !important;
  }

  .swiper {
    margin-right: 0 !important;
    width: auto !important;
  }

  @media (min-width: 768px) {
    .wrapper-section2 {
      background-position: 111% -22px;
      object-position: center;
      background-position: right 147px;
      background-repeat: no-repeat;
      background: url("./../../assets/bgsec2.png") no-repeat 59% 15rem, linear-gradient(to bottom, #FFFFFF 80%, #FEF8F8 86%);
    }

    .contents__tools {
      background-position: 11rem 1rem;
      background-image: url("./../../assets/section3-bg.png");
    }

    .wrapper-section4 {
      background: url('./../../assets/section4-bg--md.png') no-repeat 0% 27rem / 7rem, linear-gradient(to bottom, #FEF8F8 80%, #FFFFFF 86%);
    }

    .swiper {
      margin-right: 0 !important;
      width: 101% !important;
    }
  }

  @media (min-width: 1024px) {
    .wrapper-section2 {
      background: url("./../../assets/bgsec2.png") no-repeat 99% 3rem, linear-gradient(to bottom, #FFFFFF 80%, #FEF8F8 86%);
    }

    .contents__tools {
      background-position: 0rem 1rem;
      background-image: url("./../../assets/section3-bg.png");
    }

    .wrapper-section4 {
      background: url('./../../assets/section4-bg--md.png') no-repeat 0% 27rem / 7rem, linear-gradient(to bottom, #FEF8F8 80%, #FFFFFF 79%);
    }

    .wrapper-section5 {
      object-position: center;
      background: url('./../../assets/section5-bg1.png') no-repeat -86% 7rem, url('./../../assets/section5-bg2.png') no-repeat 92% 3.5rem;
    }

    .swiper {
      margin-right: 0 !important;
      width: 45rem !important;
    }
  }

  @media (min-width: 1280px) {
    .wrapper-section4 {
      background: url('./../../assets/section4-bg--md.png') no-repeat 0% 27rem / 7rem, url('./../../assets/section4-bg1.png') no-repeat 81% 14rem, linear-gradient(to bottom, #FEF8F8 80%, #FFFFFF 79%);
    }

    .swiper {
      margin-right: 0 !important;
      width: 45rem !important;
    }

    .col-parent2 {
      background: url('./../../assets/Frame.png') no-repeat 100% 16rem / 25rem;
    }
  }
}