/** HOME HERO **/

#hero {
  position: relative;
  color: var(--color-white);
}

#hero img {
  /* height: 100vh; */
  width: 100%;
}

#hero .title {
  position: absolute;
  left: var(--gap-x);
  top: calc(var(--gap-y) + var(--breche-l));
}

#hero h2 {
  line-height: 1em;
}

.dogod {
  position: absolute;
  right: var(--gap-x);
  bottom: var(--gap-y);
  padding: 8px 7.5px 11px 6.5px;
  background: rgba(0, 0, 0, 0.33);
  color: var(--color-white);
  display: inline-block;
}

/** × OTHER HEROS × **/
#c-hero {
  position: relative;
  width: 100%;
  color: var(--color-white);
}

#c-hero img {
  width: 100%;
  height: 40vh;
  object-fit: cover;
  display: block;
}

#c-hero h1 {
  position: absolute;
  bottom: 1rem; /* Distance from bottom */
  left: var(--gap-x); /* Distance from left, using your gap variable */
  margin: 0;
  color: var(--color-white);


/**** 
        HERO INTEGRATION
****/

.hero-full {
  position: relative;
  color: var(--color-white);
}

.hero-banner {
  position: relative;
  color: var(--color-white);
}

.hero-full h1,
.hero-full h2,
.hero-full .dogod {
  color: var(--color-white);
  transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-banner h1,
.hero-banner h2 {
  color: var(--color-white);
  transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

}