.banner {
  --banner-top-bg: #e6b889;    
  --banner-bottom-bg: #c13628;  
  --banner-text: #ffde9c;     
  --banner-zig: 16px;           

  width: 100%;
  overflow: hidden;
  background: transparent;
}

.banner__top,
.banner__bottom {
  position: relative;
  z-index: 2;
}

.banner__media {
  position: relative;
  z-index: 1;

  margin: 0;
  width: 100%;
  line-height: 0; 

  margin-top: calc(var(--banner-zig) * -1);
}

.banner__image {
  display: block;
  width: 100%;

  height: clamp(420px, 38vw, 650px);
  object-fit: cover;
  object-position: center 55%;
}

.banner__top {
  background: var(--banner-top-bg);
  height: 56px;
  width: 100%;

  -webkit-clip-path: polygon(
    0% 0%, 100% 0%,
    100% calc(100% - var(--banner-zig)),
    98% 100%, 96% calc(100% - var(--banner-zig)), 94% 100%,
    92% calc(100% - var(--banner-zig)), 90% 100%, 88% calc(100% - var(--banner-zig)), 86% 100%,
    84% calc(100% - var(--banner-zig)), 82% 100%, 80% calc(100% - var(--banner-zig)), 78% 100%,
    76% calc(100% - var(--banner-zig)), 74% 100%, 72% calc(100% - var(--banner-zig)), 70% 100%,
    68% calc(100% - var(--banner-zig)), 66% 100%, 64% calc(100% - var(--banner-zig)), 62% 100%,
    60% calc(100% - var(--banner-zig)), 58% 100%, 56% calc(100% - var(--banner-zig)), 54% 100%,
    52% calc(100% - var(--banner-zig)), 50% 100%, 48% calc(100% - var(--banner-zig)), 46% 100%,
    44% calc(100% - var(--banner-zig)), 42% 100%, 40% calc(100% - var(--banner-zig)), 38% 100%,
    36% calc(100% - var(--banner-zig)), 34% 100%, 32% calc(100% - var(--banner-zig)), 30% 100%,
    28% calc(100% - var(--banner-zig)), 26% 100%, 24% calc(100% - var(--banner-zig)), 22% 100%,
    20% calc(100% - var(--banner-zig)), 18% 100%, 16% calc(100% - var(--banner-zig)), 14% 100%,
    12% calc(100% - var(--banner-zig)), 10% 100%, 8% calc(100% - var(--banner-zig)), 6% 100%,
    4% calc(100% - var(--banner-zig)), 2% 100%,
    0% calc(100% - var(--banner-zig))
  );
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% calc(100% - var(--banner-zig)),
    98% 100%, 96% calc(100% - var(--banner-zig)), 94% 100%,
    92% calc(100% - var(--banner-zig)), 90% 100%, 88% calc(100% - var(--banner-zig)), 86% 100%,
    84% calc(100% - var(--banner-zig)), 82% 100%, 80% calc(100% - var(--banner-zig)), 78% 100%,
    76% calc(100% - var(--banner-zig)), 74% 100%, 72% calc(100% - var(--banner-zig)), 70% 100%,
    68% calc(100% - var(--banner-zig)), 66% 100%, 64% calc(100% - var(--banner-zig)), 62% 100%,
    60% calc(100% - var(--banner-zig)), 58% 100%, 56% calc(100% - var(--banner-zig)), 54% 100%,
    52% calc(100% - var(--banner-zig)), 50% 100%, 48% calc(100% - var(--banner-zig)), 46% 100%,
    44% calc(100% - var(--banner-zig)), 42% 100%, 40% calc(100% - var(--banner-zig)), 38% 100%,
    36% calc(100% - var(--banner-zig)), 34% 100%, 32% calc(100% - var(--banner-zig)), 30% 100%,
    28% calc(100% - var(--banner-zig)), 26% 100%, 24% calc(100% - var(--banner-zig)), 22% 100%,
    20% calc(100% - var(--banner-zig)), 18% 100%, 16% calc(100% - var(--banner-zig)), 14% 100%,
    12% calc(100% - var(--banner-zig)), 10% 100%, 8% calc(100% - var(--banner-zig)), 6% 100%,
    4% calc(100% - var(--banner-zig)), 2% 100%,
    0% calc(100% - var(--banner-zig))
  );
}

.banner__bottom {
  background: var(--banner-bottom-bg);
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 44px 16px;
  text-align: center;

  margin-top: calc(var(--banner-zig) * -1);

  -webkit-clip-path: polygon(
    0% var(--banner-zig), 2% 0%, 4% var(--banner-zig), 6% 0%, 8% var(--banner-zig), 10% 0%,
    12% var(--banner-zig), 14% 0%, 16% var(--banner-zig), 18% 0%, 20% var(--banner-zig), 22% 0%,
    24% var(--banner-zig), 26% 0%, 28% var(--banner-zig), 30% 0%, 32% var(--banner-zig), 34% 0%,
    36% var(--banner-zig), 38% 0%, 40% var(--banner-zig), 42% 0%, 44% var(--banner-zig), 46% 0%,
    48% var(--banner-zig), 50% 0%, 52% var(--banner-zig), 54% 0%, 56% var(--banner-zig), 58% 0%,
    60% var(--banner-zig), 62% 0%, 64% var(--banner-zig), 66% 0%, 68% var(--banner-zig), 70% 0%,
    72% var(--banner-zig), 74% 0%, 76% var(--banner-zig), 78% 0%, 80% var(--banner-zig), 82% 0%,
    84% var(--banner-zig), 86% 0%, 88% var(--banner-zig), 90% 0%, 92% var(--banner-zig), 94% 0%,
    96% var(--banner-zig), 98% 0%, 100% var(--banner-zig),
    100% 100%, 0% 100%
  );
  clip-path: polygon(
    0% var(--banner-zig), 2% 0%, 4% var(--banner-zig), 6% 0%, 8% var(--banner-zig), 10% 0%,
    12% var(--banner-zig), 14% 0%, 16% var(--banner-zig), 18% 0%, 20% var(--banner-zig), 22% 0%,
    24% var(--banner-zig), 26% 0%, 28% var(--banner-zig), 30% 0%, 32% var(--banner-zig), 34% 0%,
    36% var(--banner-zig), 38% 0%, 40% var(--banner-zig), 42% 0%, 44% var(--banner-zig), 46% 0%,
    48% var(--banner-zig), 50% 0%, 52% var(--banner-zig), 54% 0%, 56% var(--banner-zig), 58% 0%,
    60% var(--banner-zig), 62% 0%, 64% var(--banner-zig), 66% 0%, 68% var(--banner-zig), 70% 0%,
    72% var(--banner-zig), 74% 0%, 76% var(--banner-zig), 78% 0%, 80% var(--banner-zig), 82% 0%,
    84% var(--banner-zig), 86% 0%, 88% var(--banner-zig), 90% 0%, 92% var(--banner-zig), 94% 0%,
    96% var(--banner-zig), 98% 0%, 100% var(--banner-zig),
    100% 100%, 0% 100%
  );
}

.banner__message {
  margin: 0;
  color: var(--banner-text);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 56px);
  letter-spacing: 0.02em;
}

.banner__image {
  height: clamp(540px, 56vw, 2000px); 
  object-fit: cover;
  object-position: center 58%; 
}

.banner__media {
  margin-top: calc(var(--banner-zig) * -1);
}

.banner__bottom {
  padding: 40px 16px; 
  margin-top: calc(var(--banner-zig) * -1);
}