<header class="header">
  <nav class="nav">
    <div class="nav__item" data-crop>
      <a class="nav__link" href="#">Ссылка 1</a>
    </div>
    <div class="nav__item" data-crop>
      <a class="nav__link nav__link--accent" href="#">Ссылка 2</a>
    </div>
    <div class="nav__item" data-crop>
      <a class="nav__link" href="#">Ссылка 3</a>
    </div>
    <div class="nav__item" data-crop>
      <a class="nav__link nav__link--primary" href="#">Ссылка 4</a>
    </div>
  </nav>
</header>
<div class="main">
  <div class="main__block main__block--primary" data-crop>
    <h1 class="main__title">Lorem, ipsum dolor.</h1>
    <p class="main__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem doloremque temporibus odio. A officia, dicta temporibus nam est voluptas neque aut vel suscipit tenetur incidunt expedita laboriosam tempora esse dolor deserunt laudantium aliquid harum consectetur sequi adipisci velit! Minima, quibusdam quia. Unde vitae tempora voluptatem, culpa a hic minus officiis?</p>
    <p class="main__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non reprehenderit vero assumenda fugiat magni! Repellat autem veniam nulla laudantium cupiditate porro illum illo sequi aliquid!</p>
  </div>
  <div class="main__block main__block--large" data-crop>
    <img class="main__image" src="https://images.unsplash.com/photo-1591962283104-ba6302a38ce7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80" alt="">
  </div>
  <div class="main__block" data-crop>
    <img class="main__image" src="https://images.unsplash.com/photo-1591975602197-69de5664af19?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80" alt="">
  </div>
  <div class="main__block" data-crop>
    <img class="main__image" src="https://images.unsplash.com/photo-1591946522651-90fbace43004?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" alt="">
  </div>
</div>

:root {
  --padding: 120px;
  
  @media (max-width: 768px) {
    --padding: 60px;
  }
}

body {
  margin: 0;
  font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
  background: #e9e9e9;
}

.header {
  padding: 120px var(--padding);
  background-image: url(https://images.unsplash.com/photo-1591802949479-af6947fea95f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
  background-position: 50% 60%;
  background-repeat: no-repeat;
  background-size: cover;
}

.main {
  padding: 0 var(--padding);
  gap: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 320px 160px;
  transform: translateY(-40px);
  
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
  
  &__block {
    box-sizing: border-box;
    background: #ffffff;
    overflow: hidden;
    
    &--primary {
      padding: 20px;
      gap: 20px;
      grid-row: span 2;
      grid-column: span 2;
      display: grid;
      grid-auto-rows: max-content;
    }
    
    &--large {
      min-height: 240px;
      grid-column: span 2;
    }
  }
  
  &__title {
    margin: 0;
    font-weight: 500;
  }
  
  &__text {
    margin: 0;
    text-align: justify;
  }
  
  &__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
}

.nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  
  &__item {}
  
  &__link {
    padding: 20px;
    text-decoration: none;
    display: block;
    background: var(--background, transparent);
    color: var(--color, #ffffff);
    
    &--accent {
      --background: #e45136;
    }
    
    &--primary {
      --background: #ffd700;
      --color: #000000;
      
      font-weight: 500;
    }
  }
}

const elements = document.querySelectorAll('[data-crop]');

const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

for (const element of elements) {
  const points = [
    [random(0, 10), random(0, 10)],
    [random(-10, 0), random(0, 10)],
    [random(-10, 0), random(-10, 0)],
    [random(0, 10), random(-10, 0)]
  ];
  const clipPath = `polygon(
    calc(0% + ${points[0][0]}px) calc(0% + ${points[0][1]}px),
    calc(100% + ${points[1][0]}px) calc(0% + ${points[1][1]}px),
    calc(100% + ${points[2][0]}px) calc(100% + ${points[2][1]}px),
    calc(0% + ${points[3][0]}px) calc(100% + ${points[3][1]}px)
  )`;
  
  element.style.setProperty('clip-path', clipPath);
}