.header-container {
  flex-direction: column;
  gap: 14px;
}

.home-container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

@media (max-width: 768px) {
    /* tudo aqui é celular */
}

@media (max-width: 768px) {
    .produtos {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 768px) {
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.3rem; }
    p  { font-size: 1rem; }
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
}

@media (max-width: 768px) {
    button {
        padding: 14px;
        font-size: 1rem;
    }
}

.menu {
    display: flex;
    gap: 20px;
}

@media (max-width: 768px) {
    .menu {
        flex-direction: column;
        gap: 10px;
    }
}