.ecosystem-section {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 60px);
  overflow: hidden;
  background: #f3ecd8;
  color: #4e342e;
}

.ecosystem-section__inner {
  position: relative;
  display: grid;
  place-items: center;
  width: min(1500px, 100%);
}

.ecosystem-section h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.ecosystem-section__picture {
  display: grid;
  place-items: center;
  width: 100%;
}

.ecosystem-section__picture img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - clamp(48px, 8vw, 120px));
  max-height: calc(100svh - clamp(48px, 8vw, 120px));
  object-fit: contain;
}

@media (max-width: 720px) {
  .ecosystem-section {
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    display: block;
    padding: 28px 18px;
    overflow: hidden;
  }

  .ecosystem-section__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(100%, 560px);
    height: 100%;
    margin: 0 auto;
  }

  .ecosystem-section h2 {
    position: static;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    margin: 0 0 20px;
    padding: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    transform: none;
    white-space: normal;
    font-size: var(--section-title-size);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.035em;
    text-align: left;
  }

  .ecosystem-section__picture {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
  }

  .ecosystem-section__picture img {
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    object-position: top center;
  }
}