.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr;
max-width: 1440px;
font-size: 0;
}
.hero-item,
.standard-item {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.news-item {
display: inline-block;
min-height: 400px;
width: 50%;
}
.hero-item {
background-image: url("https://picsum.photos/1500/900");
}
.standard-item:nth-child(2) {
background-image: url("https://picsum.photos/1200/600");
}
.standard-item:nth-child(3) {
background-image: url("https://picsum.photos/900/500");
}
.standard-item:nth-child(4) {
background-image: url("https://picsum.photos/1800/1000");
}
@supports (display: grid) {
.news-item {
width: auto;
min-height: 0;
}
.hero-item {
grid-column: 1 / span 2;
grid-row: 1 / 50;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
}
.standard-item:nth-child(2) {
grid-column: 1 / span 1;
grid-row: 50 / 100;
clip-path: polygon(0 14%, 0 86%, 90% 81%, 100% 6%);
margin-top: -73px;
}
.standard-item:nth-child(3) {
grid-column: 2 / span 1;
grid-row: 50 / 100;
clip-path: polygon(13% 6%, 4% 84%, 100% 100%, 100% 0%);
margin-top: -73px;
margin-left: -15%;
margin-bottom: 18px;
}
.standard-item:nth-child(4) {
grid-column: 1 / span 2;
grid-row: 100 / 150;
clip-path: polygon(45% 0, 100% 15%, 100% 100%, 0 100%, 0 5%);
margin-top: -107px;
}
}
