.tg-hero {
  padding-block: clamp(1rem, 3vw, 2rem) clamp(2rem, 6vw, 4rem);
}

.tg-hero__grid {
  gap: clamp(1.5rem, 4vw, 3rem);
}

.tg-hero__content h1 {
  max-width: 14ch;
  margin-block-end: 0.35em;
  font-size: clamp(2.25rem, 5vw, 4rem);
}

.tg-hero__subtitle {
  max-width: 38ch;
  color: var(--tg-color-texte-doux);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.tg-hero__figure {
  margin: 0;
}

.tg-hero__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 1.25rem;
  object-fit: cover;
}

.tg-hero .wp-block-buttons {
  gap: 0.75rem;
}

.tg-monthly,
.tg-boxes,
.tg-story,
.tg-instagram {
  margin-block-start: clamp(3rem, 8vw, 5rem);
}

.tg-story {
  padding: clamp(1.5rem, 4vw, 3rem);
  background-color: var(--tg-color-kraft);
  border-radius: 1.25rem;
}

.tg-story p {
  max-width: 65ch;
}

.tg-instagram__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 2vw, 1rem);
}

.tg-instagram__item {
  margin: 0;
}

.tg-instagram__image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.75rem;
  object-fit: cover;
}

@media (min-width: 900px) {
  .tg-hero__media {
    flex-basis: 45%;
  }

  .tg-hero__content {
    flex-basis: 55%;
  }
}