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

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

main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 30px;
  padding: 15px;
  grid-gap: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #f0f0f0;
  display: grid;
  grid-template-columns: 30vw 3.3fr 3.3fr 3.3fr;
  grid-template-rows: 32vw 1fr;
  grid-template-areas: "rightside section-left section-left section-left " "rightside fist second third ";
}
main .rightside {
  background-color: aqua;
  grid-area: rightside;
  background-image: url(https://images.unsplash.com/photo-1760293630917-2e4bef6e97f3?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=735);
  background-size: cover;
  background-position: center;
  border-radius: 30px;
}
main .rightside:hover {
  opacity: 0.8;
  cursor: pointer;
}
main .section-left {
  background-color: rgba(106, 209, 147, 0.575);
  grid-area: section-left;
  background-image: url(https://images.unsplash.com/photo-1484950763426-56b5bf172dbb?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8ZGVza3RvcCUyMHdhbGxwYXBlcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=600);
  background-size: cover;
  background-position: center;
  border-radius: 30px;
}
main .section-left:hover {
  opacity: 0.8;
  cursor: pointer;
}
main .fist {
  background-color: rgb(200, 137, 183);
  grid-area: fist;
  background-image: url(https://images.unsplash.com/photo-1708034677699-6f39d9c59f6e?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8YW5pbWUlMjBnaXJsfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=600);
  background-position: center;
  background-size: cover;
  border-radius: 30px;
}
main .fist:hover {
  opacity: 0.8;
  cursor: pointer;
}
main .second {
  background-color: rgb(123, 123, 168);
  grid-area: second;
  background-image: url(https://images.unsplash.com/photo-1632506823413-200b3d091e90?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fGFuaW1lJTIwZ2lybHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=600);
  background-position: center;
  background-size: cover;
  border-radius: 30px;
}
main .second:hover {
  opacity: 0.8;
  cursor: pointer;
}
main .third {
  background-color: yellow;
  grid-area: third;
  border-radius: 30px;
  background-position: center;
  background-size: cover;
  background-image: url(https://images.unsplash.com/photo-1697715841744-9c24df04dacc?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGFuaW1lJTIwZ2lybHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=600);
}
main .third:hover {
  opacity: 0.8;
  cursor: pointer;
}/*# sourceMappingURL=style.css.map */