/* Responsive adjustments for small screens - mobile-first approach for better performance */
.mLayout {
    margin: 0 30px; /* Shorthand for left/right symmetry, applies to small screens by default */
}

@media (min-width: 361px) {
    .mLayout {
        margin: 0; /* Reset margins for larger screens (tablets/desktops) */
    }
}

/* Event gadget title styling - improved contrast and readability */
.WaGadgetEvents.WaGadgetEventsStateList h3.sectionTitle {
    background-color: #ffffff; /* White with hex fallback for consistency */
    color: #333333;           /* Darker gray for better accessibility (WCAG AAA compliant) */
    padding: 10px;            /* Add padding for better spacing and user experience */
}

/* Additional responsive tweaks for the event title on small screens */
@media (max-width: 480px) {
    .WaGadgetEvents.WaGadgetEventsStateList h3.sectionTitle {
        font-size: 1.2em;     /* Reduce font size for narrow viewports */
        text-align: center;   /* Center text for improved mobile UX */
    }
}