Using grid and on mobile overflows content

.container {
  
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1rem;

}
.grid-conteiner{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
  gap: 4rem;
}
.hero-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    align-items: center;
    gap: 2rem; 
}