.sports-section {
    display: flex;
    flex-wrap: wrap;             /* Allows items to wrap on small screens */
    justify-content: center;
    gap: 20px;
    padding: 20px;
    background-color: #f0f0f0;
}

.sport {
background-color: #ffffff;
padding: 15px 25px;
border-radius: 10px;
box-shadow: 0 2px 6px rgb(0, 0, 0, 0.1);
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
flex: 1 1 150px; /*Allows flexible width with minimum */
text-align: center;
}

/* Optional: Adjustments for very small screens */
@media (max-width: 600px) {
    .sports-section {
        gap: 10px;
    }


.sport {
    flex: 1 1 100%; /* Stack items on smaller screens */
}
}