nouveau-theatre-de-besancon/assets/css/src/hero.css

.hero {
  --empty-space: 11.9rem;
  background-color: var(--color-beige-light);
  --padding-vertical: calc(var(--space-m) / 1.5);
  display: grid;
  grid-template-columns: 1.6fr 3fr;
  column-gap: calc(var(--space-m) / 1.5);
  height: calc(100vh - var(--empty-space));
}

.hero__text {
  position: relative;
}

.hero__text h2 {
  font-size: var(--font-size-xl);
  width: 100%;
  margin-bottom: var(--padding-vertical);
}

.hero__text h2.big {
  font-size: var(--font-size-xxl);
}

.hero__text h3 {
  /* color: var(--color-season); */
  font-size: var(--font-size-h2);
}
.hero__text h3:nth-child(odd) {
  text-align: end;
}

.hero__text p:not(:last-of-type) {
  margin-bottom: 1rem;
}

.hero__text p:first-of-type {
  margin-top: var(--padding-vertical);
}

.hero__link {
  position: absolute;
  bottom: 0;
  font-weight: bold;
}
.hero__link::before {
  display: inline-block;
  content: "→";
  margin-right: 1rem;
  transform: translateX(0rem);
  transition: all 0.3s var(--curve-quick-slow);
}

.hero__link:hover:before {
  margin-right: 2rem;
}

.hero__image {
  height: calc(100vh - var(--empty-space) - 2 * var(--padding-vertical));
}

.hero__image picture {
  height: 100%;
}
.hero__image img {
  object-fit: cover;
}

@media screen and (max-width: 800px) {
  .hero__text h2 {
    text-align: center;
  }
  .hero__text h2.big {
    font-size: calc(var(--font-size-xxl) / 1.2);
    text-align: left;
  }

  .hero__text p:first-of-type {
    margin-top: 1rem;
  }

  .hero__link {
    position: relative;
    display: block;
    margin: 1rem 0;
  }

  .hero {
    padding: calc(var(--padding-vertical) / 1.2) var(--space-m) 2rem
      var(--space-m) !important;
    border-bottom: none !important;
    height: auto;
  }

  .hero__image {
    height: 60vw;
  }
}