.text-image-link-container {
  padding: 16px;
  background-color: #EDF0F4;
}

.text,
.image {
  transform: translateY(40px);
}

.top-content-container {
  display: flex;
  flex-direction: column;
}

.text-box-top {
  margin-bottom: 32px;
}

.text-box-top h1 {
  font-size: 28px;
}

/* --------------------------------------------------------------------------
   Image wrapper
   -------------------------------------------------------------------------- */

.image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Large hexagon
   -------------------------------------------------------------------------- */

.img-container {
  width: 230px;
  height: 266px; /* fallback, overridden by aspect-ratio below */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  overflow: hidden;
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

/* --------------------------------------------------------------------------
   Small overlapping hexagon
   -------------------------------------------------------------------------- */

.image-small {
  position: absolute;
  width: 110px;
  height: 127px; /* fallback, overridden by aspect-ratio below */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  top: -8%;
  right: 6%;
  z-index: 5;
}

.image-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media screen and (min-width: 400px) {
  .img-container {
    width: 300px;
    height: 346px;
  }
  .image-small {
    width: 150px;
    height: 173px;
    top: -6%;
    right: 6%;
  }
}

@media screen and (min-width: 500px) {
  .img-container {
    width: 370px;
    height: 427px;
  }
  .image-small {
    width: 175px;
    height: 202px;
    top: -5%;
    right: 5%;
  }
}

@media screen and (min-width: 600px) {
  .image-small {
    right: 12%;
  }
}

@media screen and (min-width: 700px) {
  .image-small {
    right: 17%;
  }
}

@media screen and (min-width: 800px) {
  .image-small {
    right: 20%;
  }
}

@media screen and (min-width: 900px) {
  .text-image-link-container {
    padding-top: 80px;
  }
  .top-content-container {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }
  .image-small {
    right: -3%;
  }
  .text-box-top h1 {
    font-size: 58px;
  }
  .image-wrapper {
    justify-content: end;
  }
}

@media screen and (min-width: 1000px) {
  .content-container-img {
    flex-direction: row;
    gap: 120px;
  }
  .content-container-img-swap {
    flex-direction: row-reverse;
    gap: 120px;
  }
  .text-box {
    max-width: 600px;
  }
  .text-box h3 {
    font-size: 36px;
  }
  .text-box p {
    font-size: 20px;
  }
  .numbers h4 {
    font-size: 29px;
  }
  .numbers {
    max-width: 350px;
  }
}

@media screen and (min-width: 1200px) {
  .text-image-link-container {
    padding: 80px 0 0 0;
  }
}

/* --------------------------------------------------------------------------
   Exact hexagon ratio for modern browsers.
   Replaces the pixel heights above so the shape stays perfect at any width.
   -------------------------------------------------------------------------- */

@supports (aspect-ratio: 1 / 1) {
  .img-container,
  .image-small {
    height: auto;
    aspect-ratio: 1 / 1.1547;
  }
}