/* Responsive for main flex columns */
@media (max-width: 800px) {
  main > div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  main > div[style*="display: flex"] > div {
    max-width: 100% !important;
    width: 100% !important;
  }
  section > div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  section > div[style*="display: flex"] > div {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Responsive for show grids */
@media (max-width: 800px) {
  [style*="display: grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* Header responsiveness */
@media (max-width: 800px) {
  .header-flex {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }
  .header-logo {
    min-width: 0 !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 1rem !important;
  }
  .header-center {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}