www/src/layouts/partials/white-paper-gen-art.html

<!-- Desktop -->

<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="wp-gen-art-1"></div>
<div class="gen-art animated-5 animatedFadeInUp fadeInUp" id="wp-gen-art-2"></div>
<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="wp-gen-art-3"></div>
<div class="gen-art animated-25 animatedFadeInUp fadeInUp" id="wp-gen-art-4"></div>

<!-- Mobile -->

<div class="gen-art-mobile" id="m-wp-gen-art-1"></div>
<div class="gen-art-mobile" id="m-wp-gen-art-2"></div>
<div class="gen-art-mobile" id="m-wp-gen-art-3"></div>
<div class="gen-art-mobile" id="m-wp-gen-art-4"></div>

<style>

  #wp-gen-art-1{
    position:absolute;
    width:34vw;
    height: 18vw;
    right: 5.8vw;
    top:16.741vw;
    z-index: 0;
    background-image: url("/Images/gen-art/orange-pattern.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
  }

  #wp-gen-art-2{
    position:absolute;
    width:34vw;
    height: 12vw;
    left: 5.8vw;
    top:11.161vw;
    z-index: 0;
    background-image: url("/Images/gen-art/dream-tree.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
  }

  #wp-gen-art-3{
    position:absolute;
    width:12vw;
    height: 12vw;
    border-radius: 200px;
    left: 36vw;
    top:16vw;
    z-index: 0;
    background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
  }

  #wp-gen-art-4{
    position:absolute;
    width:45vw;
    height: 7vw;
    left: 36vw;
    top:40vw;
    z-index: 0;
    background-image: url("/Images/gen-art/white-light-pattern.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
  }

  #m-wp-gen-art-1{
    position:absolute;
    width:29vw;
    height: 19.3vw;
    left: 6.8vw;
    margin-top:164vw;
    z-index: 3;
    background-image: url("/Images/gen-art/orange-pattern.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
  }

  #m-wp-gen-art-2{
    position:absolute;
    width:15vw;
    height:15vw;
    left: 29.8vw;
    margin-top:155vw;
    border-radius: 200px;
    z-index: 3;
    background-image: url("/Images/gen-art/dream-tree.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
  }

  #m-wp-gen-art-3{
    position:absolute;
    width:38.5vw;
    height:9.5vw;
    right: 6.8vw;
    margin-top:154.5vw;
    z-index: 3;
    background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
  }

  #m-wp-gen-art-4{
    position:absolute;
    width:40vw;
    height:40vw;
    right: 12vw;
    margin-top:20vw;
    z-index: 0;
    background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
  }

  @media only screen and (min-width: 576px) {
    .gen-art-mobile{
      display:none;
    }
  }

</style>