เลย์เอาต์ 3: เนื้อหา hero กึ่งกลาง

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center; /* แกนหลัก = แนวตั้ง */
  align-items: center;     /* แกนขวาง = แนวนอน */
  gap: 12px;
  min-height: 60vh;
  text-align: center;
  padding: 24px;
}