/* Main Container Styling */ .menu-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; /* Space between items */ padding: 20px; background-color: #f9f9f9; /* Optional: Matches the background color */ } /* Menu Card Styling */ .menu-card { display: flex; flex-direction: column; justify-content: space-between; align-items: center; border: 1px solid #ddd; padding: 15px; border-radius: 8px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); background-color: white; text-align: center; } .menu-card-details h3 { font-size: 16px; margin: 10px 0; } .menu-card-details p { font-size: 14px; color: #666; } .menu-card-image { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; } .add-button { background-color: #28a745; color: white; border: none; padding: 8px 15px; font-size: 14px; border-radius: 5px; cursor: pointer; margin-top: 10px; } /* Responsive Design */ @media (max-width: 768px) { .menu-container { grid-template-columns: repeat(2, 1fr); /* 2 items per row on smaller screens */ } } @media (max-width: 480px) { .menu-container { grid-template-columns: 1fr; /* 1 item per row on very small screens */ } }