* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

main {
  height: 100%;
  width: 100%;
  display: relative;
}

section {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 0.3fr 0.3fr 0.3fr 0.3fr;
  grid-template-rows: 0.25fr 0.25fr 0.25fr 0.25fr;
  grid-template-areas:
    "box1 box2 box2 box3"
    "box1 box2 box2 box4"
    "box5 box6 box7 box8"
    "box9 box6 box7 box8";
  grid-gap: 0.3rem;
}

.box1 {
  grid-area: box1;
  background-image: url("https://i.pinimg.com/1200x/97/75/3e/97753ec0599c1bbc59e0dc5b0d4bd29e.jpg");
  background-size: cover;
  background-position: center;
}

.box2 {
  grid-area: box2;
  background-image: url("./assets/luffy.jpg");
  background-size: cover;
  background-position: center;
}

.box3 {
  grid-area: box3;
  background-image: url("https://i.pinimg.com/1200x/4a/75/44/4a75441e7e973cde6784098e8de32103.jpg");
  background-size: cover;
  background-position: center;
}

.box4 {
  grid-area: box4;
  background-image: url("https://i.pinimg.com/1200x/e5/99/80/e599801b8f55f62293b2f6756e3576e1.jpg");
  background-size: cover;
  background-position: center;
}

.box5 {
  grid-area: box5;
  background-image: url("https://i.pinimg.com/1200x/fd/41/46/fd41465b53e960c3bc87b601697de6f9.jpg");
  background-size: cover;
  background-position: center;
}

.box6 {
  grid-area: box6;
  background-image: url("https://i.pinimg.com/1200x/e9/74/bc/e974bc7ad1804c49b7a9f7c82cdf7f26.jpg");
  background-size: cover;
  background-position: top;
}

.box7 {
  grid-area: box7;
  background-image: url("https://i.pinimg.com/1200x/21/4c/12/214c12be8357d1c8fb71cc36eb5dd706.jpg");
  background-size: cover;
  background-position: center;
}

.box8 {
  grid-area: box8;
  background-image: url("https://i.pinimg.com/1200x/52/79/82/527982a85dccd3278191035bbe64c8cb.jpg");
  background-size: cover;
  background-position: center;
}

.box9 {
  grid-area: box9;
  background-image: url("https://i.pinimg.com/1200x/78/cb/28/78cb2871947e6a047369ac52e210b00e.jpg");
  background-size: cover;
  background-position: center 30%;
}

.circle {
  height: 250px;
  width: 250px;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid white;
  background-image: url("https://i.pinimg.com/736x/f1/51/53/f151530efcc8257f435f5fccd0891627.jpg");
  background-size: cover;
  background-position: center 5%;
}

/* Responsive */

@media only screen and (max-width: 600px) {
  section {
    min-height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.7fr 0.3fr 0.7fr 0.7fr 0.3fr 0.7fr;
    grid-template-areas:
      "box1 box1"
      "box9 box5"
      "box2 box2"
      "box6 box7"
      "box3 box8"
      "box4 box8";
  }

  .box1 {
    background-position: center 40%;
  }

  .box3 {
    background-position: center 40%;
  }

  .circle {
    height: 150px;
    width: 150px;
  }
}