img {
  display: block;
  width: 100%;
  height: 100%;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 12.5vw);
  grid-template-rows: repeat(4, 12.5vw);
}

.image:first-child {
  grid-column: 2/4;
}

.image:nth-of-type(2) {
  grid-column: 1/3;
  grid-row: 2/4;
}

.image:nth-of-type(3) {
  grid-column: 3/5;
  grid-row: 2/4;
}

.image:nth-of-type(4) {
  grid-column: 2/4;
  grid-row: 3/5;
}
.image {
  margin: 0;
  height: 0;
  padding-top: 25vw;
  overflow: hidden;
  position: relative;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  filter: grayscale(100%);
  transition: filter 1s;
}
.image:hover {
  filter: grayscale(0);
}
img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: top;
  box-sizing: border-box;
}
.image::after {
  content: "";
  border: 0.5vw solid white;
  height: 72%;
  width: 72%;
  top: 14%;
  left: 14%;
  position: absolute;
  transform: rotate(45deg);
  transform-origin: center;
  box-sizing: border-box;
}