.flipbook-img {
    background: #FFFFFF00;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
  }
  #flipbook {
    width: 1182px;
    height: 591px;
  }
  #flipbook .page {
    width: 591px;
    height: 591px;
  }
  #flipbook .page img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media screen and (max-width: 1220px) {
    #flipbook {
      width: 1040px;
      height: 520px;
    }
    #flipbook .page {
      width: 520px;
      height: 520px;
    }
    #flipbook .page img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  @media screen and (max-width: 1160px) {
    #flipbook {
      width: 910px;
      height: 455px;
    }
    #flipbook .page {
      width: 455px;
      height: 455px;
    }
    #flipbook .page img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  @media screen and (max-width: 1060px) {
    #flipbook {
      width: 830px;
      height: 415px;
    }
    #flipbook .page {
      width: 415px;
      height: 415px;
    }
    #flipbook .page img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  @media screen and (max-width: 960px) {
    #flipbook {
      width: 730px;
      height: 365px;
    }
    #flipbook .page {
      width: 365px;
      height: 365px;
    }
    #flipbook .page img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  @media screen and (max-width: 900px) {
    #flipbook {
      width: 710px;
      height: 355px;
    }
    #flipbook .page {
      width: 355px;
      height: 355px;
    }
    #flipbook .page img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  @media screen and (max-width: 800px) {
    #flipbook {
      width: 690px;
      height: 345px;
    }
    #flipbook .page {
      width: 345px;
      height: 345px;
    }
    #flipbook .page img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  @media screen and (max-width: 770px) {
    #flipbook {
      width: 640px;
      height: 320px;
    }
    #flipbook .page {
      width: 320px;
      height: 320px;
    }
    #flipbook .page img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  @media screen and (max-width: 690px) {
    #flipbook {
      width: 510px;
      height: 255px;
    }
    #flipbook .page {
      width: 255px;
      height: 255px;
    }
    #flipbook .page img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  @media screen and (max-width: 580px) {
    #flipbook {
      width: 500px;
      height: 250px;
    }
    #flipbook .page {
      width: 250px;
      height: 250px;
    }
    #flipbook .page img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  @media screen and (max-width: 390px) {
    #flipbook {
      width: 350px;
      height: 175px;
    }
    #flipbook .page {
      width: 175px;
      height: 175px;
    }
    #flipbook .page img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  @media screen and (max-width: 320px) {
    #flipbook {
      width: 280px;
      height: 140px;
    }
    #flipbook .page {
      width: 140px;
      height: 140px;
    }
    #flipbook .page img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }