* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  width: 100%;
}

#main {
  display: flex;
  flex-direction: column;
  /* gap: 30vh; */
  align-items: center;
  justify-content: start;
  width: 100%;
  min-height: 100vh;
  background-color: #000;
  padding-top: 60vh;
}

.box-p {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  perspective: 1000px;
  margin-top: -60vh;
}

.box {
  width: 70%;
  height: 70vh;
  background-image: url(https://images.unsplash.com/photo-1719937206300-fc0dac6f8cac?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  background-size: cover;
  background-position: center;
  transition: 0.7s;
  transform: rotateX(-20deg);
}