/* 1. The Parent Container */
.facilityHoursCalendar {
    display: grid;
    gap: 20px;
    width: 100%;
}

/* Responsive Column Logic */
@media (min-width: 0px) {
    .facilityHoursCalendar { grid-template-columns: 1fr; }
}

@media (min-width: 640px) {
    .facilityHoursCalendar { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .facilityHoursCalendar { grid-template-columns: repeat(3, 1fr); }
}

/* 2. The Fix for .facCalResultDay */
/* We must override the Foundation framework's width/flex settings */
.facilityHoursCalendar .facCalResultDay {
    width: auto !important;      /* Overrides 'width: 50%' or 'width: 33%' */
    max-width: none !important;  /* Overrides any max-width limits */
    flex: none !important;       /* Neutralizes Foundation's flex-grid logic */
    display: block;              /* Ensures it behaves as a standard grid item */
}