main {
  padding: 2rem 0;
  width: 100%;
  height: 60dvh;

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

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

    .block {
      width: 50px;
      height: 50px;
      background-color: var(--y);
      border: 2px solid var(--gr);
    }

    .row2 {
      display: flex;
    }

    .block1 {
      position: absolute;
      bottom: 0;
    }

    .block2 {
      position: absolute;
      top: -3rem;
      right: 0;
      z-index: -1;
    }

    .block3 {
      position: absolute;
      bottom: 0;
      right: 54px;
    }
  }
}

@media (min-width: 768px) {
  main {
    height: 80vh;
    .box {
      h1 {
        font-size: 400%;
        width: fit-content;
      }
      h2 {
        font-size: 200%;
        width: fit-content;
      }

      .block {
        width: 100px;
        height: 100px;
        transition: all 0.2s ease-in-out;

        &:hover {
          background-color: var(--l);
        }
      }

      .block2 {
        z-index: 0;
      }
    }
  }
}