.hero {
  grid-column: full-start / full-end;
  padding: 2rem 5%; /* Changed from 20rem to percentage-based padding */
  padding-top: 2rem;
  display: grid;
  grid-template-rows: 1fr min-content minmax(6rem, min-content) 1fr;
  grid-template-columns: minmax(min-content, max-content);
  row-gap: 1.5rem;
  max-width: 100%; /* Prevent overflow */
  box-sizing: border-box;
}

@media only screen and (max-width: 58em) {
  .hero {
    padding: 2rem 5%;
  }
}

@media only screen and (max-width: 37.5em) {
  .hero {
    padding: 2rem 5%;
  }
}

.hero__link {
  height: 9rem;
  width: 24rem;
}

@media only screen and (max-width: 75em) {
  .hero__link {
    padding-bottom: 20rem;
  }
}

@media only screen and (max-width: 62.5em) {
  .hero__link {
    padding-bottom: 20rem;
  }
}

@media only screen and (max-width: 58em) {
  .hero__link {
    padding-bottom: 20rem;
  }
}

.hero__logo {
  justify-self: start;
}

/* FIX: Add spacing between h1 (IMMOBILIEN) and h2 (ESG) */
.hero .heading-1 {
  margin-bottom: 2rem;
}

/* Make headings responsive to prevent overflow */
.hero .heading-1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  word-wrap: break-word;
}

.hero .heading-2 {
  font-size: clamp(1.2rem, 3vw, 2rem);
  word-wrap: break-word;
}

.hero__btn {
  align-self: start;
  justify-self: start;
  margin-top: 8rem;
  color: var(--color-green_light);
  text-transform: uppercase;
  background-color: var(--color-green);
  cursor: pointer;
}

@media only screen and (max-width: 37.5em) {
  .hero__btn {
    margin-top: 16rem;
  }
}

.hero__btn-construction {
  text-decoration: none;
  font-size: 1.5rem;
  font-family: var(--main-typography);
  color: var(--color-green);
  font-weight: 200;
}

@media only screen and (max-width: 58em) {
  .hero__btn-construction {
    font-size: 2.5rem;
    padding-top: 4rem;
  }
}

@media only screen and (max-width: 37.5em) {
  .hero__btn-construction {
    font-size: 2.5rem;
    padding-top: 4rem;
  }
}