main {
  width: 100%;
  height: 90dvh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;

  h1 {
    padding-bottom: 1rem;
    font-size: 250%;
  }

  .cta {
    a {
      background-color: var(--y);
      padding: 0.5rem;
      color: var(--d);
      font-weight: 600;

      &:nth-child(1) {
        background-color: var(--l);
      }
    }
  }

  .bgImg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;

    .box {
      width: 100%;
      height: 100%;
      position: relative;

      img {
        width: 120px;
        height: 120px;
        object-fit: contain;
        object-position: center;
        border: 2px solid var(--l);
        box-shadow: 0 1rem ;
        background-color: var(--l);
        position: absolute;

        &:nth-child(1) {
          background-color: aqua;
          top: 2rem;
          left: -3rem;
          rotate: 20deg;
        }
        &:nth-child(2) {
          background-color: blanchedalmond;
          top: 0;
          right: 0;
          rotate: -15deg;
        }
        &:nth-child(3) {
          background-color: green;
          bottom: 2rem;
          left: -2rem;
          rotate: -10deg;
        }
        &:nth-child(4) {
          background-color: yellow;
          bottom: 0;
          right: 0;
          rotate: 22deg;
        }
      }
    }
  }
}

@media (min-width: 768px) {
  main {
    h1 {
      font-size: 400%;
    }

    .bgImg {
      .box {
        img {
          width: 220px;
          height: 220px;
          object-fit: contain;
          object-position: center;
          border: 2px solid var(--l);
          background-color: var(--l);
          position: absolute;

          &:nth-child(1) {
            background-color: aqua;
            top: -5rem;
            left: -3rem;
            rotate: 20deg;
          }
          &:nth-child(2) {
            background-color: blanchedalmond;
            top: 0;
            right: 0;
            rotate: -15deg;
          }
          &:nth-child(3) {
            background-color: green;
            bottom:-2rem;
            left: 15rem;
            rotate: -10deg;
          }
          &:nth-child(4) {
            background-color: yellow;
            bottom: 0;
            right: 0;
            rotate: 22deg;
          }
        }
      }
    }
  }
}