:root {
  --tear-height: clamp(26px, 0.7rem + 2.4vw, 54px);
  --tear-tile: 1200px;
}

.home-team    { background-color: var(--color-bg); }
.intro        { background-color: var(--color-bg-2); }
.capabilities { background-color: var(--color-bg-2); }
.bruut        { background-color: var(--color-surface); }
.process      { background-color: var(--color-bg); }
.cases        { background-color: var(--color-bg-2); }
.contact      { background-color: var(--color-surface); }

.home-team,
.intro,
.bruut,
.process,
.cases,
.contact {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--tear-height) * -1);
  -webkit-mask:
    var(--tear-src) repeat-x top / var(--tear-tile) var(--tear-height),
    linear-gradient(#000, #000) repeat-x bottom / 100% calc(100% - var(--tear-height) + 1px);
          mask:
    var(--tear-src) repeat-x top / var(--tear-tile) var(--tear-height),
    linear-gradient(#000, #000) repeat-x bottom / 100% calc(100% - var(--tear-height) + 1px);
}

.home-team    { --tear-src: url("https://grom.gr/media/grom/assets/img/tears/tear-1.svg?v=1785491235"); }
.intro        { --tear-src: url("https://grom.gr/media/grom/assets/img/tears/tear-2.svg?v=1785491235"); }
.bruut        { --tear-src: url("https://grom.gr/media/grom/assets/img/tears/tear-4.svg?v=1785491235"); }
.process      { --tear-src: url("https://grom.gr/media/grom/assets/img/tears/tear-5.svg?v=1785491235"); }
.cases        { --tear-src: url("https://grom.gr/media/grom/assets/img/tears/tear-1.svg?v=1785491235"); }
.contact      { --tear-src: url("https://grom.gr/media/grom/assets/img/tears/tear-2.svg?v=1785491235"); }


.footer {
  position: relative;
  z-index: 4;
  margin-top: calc(var(--tear-height) * -1);
  --tear-src: url("https://grom.gr/media/grom/assets/img/tears/tear-3.svg?v=1785491235");
  -webkit-mask:
    var(--tear-src) repeat-x top / var(--tear-tile) var(--tear-height),
    linear-gradient(#000, #000) repeat-x bottom / 100% calc(100% - var(--tear-height) + 1px);
          mask:
    var(--tear-src) repeat-x top / var(--tear-tile) var(--tear-height),
    linear-gradient(#000, #000) repeat-x bottom / 100% calc(100% - var(--tear-height) + 1px);
}