<section id="team" class="team container-fluid">
  <svg class="svg" viewBox="0 0 300 300" preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="linear-gradient-team">
        <stop offset="0%" stop-color="#ca1614" />
        <stop offset="100%" stop-color="#a70b1a" />
      </linearGradient>
    </defs>
    <polyline class="svg__shape" points="150,0 240,60 220,120 300,160 190,300 0,200 30,60 150,0" />
  </svg>
  <div class="row">

    <div class="team-coop col-md-3 col-sm-4 col-6 mt-3 mb-3">
      <img class="mb-2" src="//placehold.it/100x150" alt="">
      <div class="team__desc">
        <p class="team__text team__text--main"><b>Иванов<br> Иван Иванович</b><br>Креативный вожак и учитель вдохновитель творческой банды</p>
        <p class="team__text team__text--copy"><b>Иванов<br> Иван Иванович</b><br>Креативный вожак и учитель вдохновитель творческой банды</p>
      </div>
    </div>

    <div class="team-coop col-md-3 col-sm-4 col-6 mt-3 mb-3">
      <img class="mb-2" src="//placehold.it/100x150" alt="">
      <div class="team__desc">
        <p class="team__text team__text--main"><b>Иванов<br> Иван Иванович</b><br>Чертежных дел мастер и суровый технадзор</p>
        <p class="team__text team__text--copy"><b>Иванов<br> Иван Иванович</b><br>Чертежных дел мастер и суровый технадзор</p>
      </div>
    </div>

    <div class="team-coop col-md-3 col-sm-4 col-6 mt-3 mb-3">
      <img class="mb-2" src="//placehold.it/100x150" alt="">
      <div class="team__desc">
        <p class="team__text team__text--main"><b>Иванов<br> Иван Иванович</b><br>Печатных дел мастер. Опора и вечный позитив студии</p>
        <p class="team__text team__text--copy"><b>Иванов<br> Иван Иванович</b><br>Печатных дел мастер. Опора и вечный позитив студии</p>
      </div>
    </div>

    <div class="team-coop col-md-3 col-sm-4 col-6 mt-3 mb-3">
      <img class="mb-2" src="//placehold.it/100x150" alt="">
      <div class="team__desc">
        <p class="team__text team__text--main"><b>Иванов<br> Иван Иванович</b><br>Холодный разум, четкость и моментальная отзывчивость нашего клуба</p>
        <p class="team__text team__text--copy"><b>Иванов<br> Иван Иванович</b><br>Холодный разум, четкость и моментальная отзывчивость нашего клуба</p>
      </div>
    </div>

    <div class="team-coop col-md-3 col-sm-4 col-6 mt-3 mb-3">
      <img class="mb-2" src="//placehold.it/100x150" alt="">
      <div class="team__desc">
        <p class="team__text team__text--main"><b>Иванов<br> Иван Иванович</b><br>Нежный сотрудник с женственным взглядом</p>
        <p class="team__text team__text--copy"><b>Иванов<br> Иван Иванович</b><br>Нежный сотрудник с женственным взглядом</p>
      </div>
    </div>

    <div class="team-coop col-md-3 col-sm-4 col-6 mt-3 mb-3">
      <img class="mb-2" src="//placehold.it/100x150" alt="">
      <div class="team__desc">
        <p class="team__text team__text--main"><b>Иванов<br> Иван Иванович</b><br>Чертежных дел мастер и суровый технадзор</p>
        <p class="team__text team__text--copy"><b>Иванов<br> Иван Иванович</b><br>Чертежных дел мастер и суровый технадзор</p>
      </div>
    </div>

    <div class="team-coop col-md-3 col-sm-4 col-6 mt-3 mb-3">
      <img class="mb-2" src="//placehold.it/100x150" alt="">
      <div class="team__desc">
        <p class="team__text team__text--main"><b>Иванов<br> Иван Иванович</b><br>Печатных дел мастер. Опора и вечный позитив студии</p>
        <p class="team__text team__text--copy"><b>Иванов<br> Иван Иванович</b><br>Печатных дел мастер. Опора и вечный позитив студии</p>
      </div>
    </div>
  </div>
</section>

.team {
  position: relative;
  background-color: #fef6f5;
  z-index: 0;
}

.team .svg {
  position: absolute;
  bottom: 50px;
  right: 50px;
  width: 150%;
  height: 150%;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
}

.svg__shape {
  fill: url(#linear-gradient-team);
}

.team-coop img {
  width: 100%;
  opacity: 0.75;
}

.team__desc {
  position: relative;
}

.team__text {
  margin: 0;
}

.team__text--main {
  color: #fef6f5;
}

.team__text--copy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #a70b1a;
  z-index: -2;
}

const svg = document.querySelector(".svg");
const polyline = svg.querySelector(".svg__shape");
const texts = document.querySelectorAll(".team__text--main");

function update() {
  texts.forEach((el) => {
    const elRect = el.getBoundingClientRect();
    const clip = [];

    for (let i = 0; i < polyline.points.length; i++) {
      const p = polyline.points[i].matrixTransform(svg.getScreenCTM());
      const x = p.x - elRect.x;
      const y = p.y - elRect.y;
      clip.push(`${x}px ${y}px`);
    }
    el.style.clipPath = `polygon(${clip.join(',')})`;
  });
}

window.addEventListener('resize', update);
window.dispatchEvent(new Event('resize'));