/* colors */
/* The CTA and Main colors are pulled from site templates created by the Design team. These colors vary per OEM or group. */
/* CTA stands for Call-to-Action. The CTA color is often a bright, eye-catching color like red or light blue, used for links and important buttons. */
/* The Main color is often a dark, muted color like black or navy blue, used for backgrounds and less important buttons. */
/* fonts */
/* breakpoints */
/* borders */
/* local variables */
/* TODO: remove if border color classes are added to site templates */
/* Construct a media query that applies to multiple ranges of breakpoints. First and last argument must either be a single number or a list of 2 numbers. */
/* Make sure to give the truncated element a width. If the truncated element has display: flex or inline-flex, add min-width: 0 to the truncated element's immediate parent. If the flex truncated element is nested inside one or more other flex containers, also add min-width: 0 to the nearest ancestor element that does NOT have display: flex or inline-flex */
/* Single element */
/* Works well for either single elements, or multiple elements grouped under the same parent */
/* Remove default styling from button element */
/* Create a multi-column ul that avoids list items breaking between 2 columns. li { display: inline-block } will force each list item to stay in one column, but also removes the default list item styling (bullets). Adding a bullet character in the ::before, changing the display of the li to inline-flex, and adding a column gap to the li restores the bullet styling. */
.hours-page .directions-hours-container {
  display: grid;
  grid-gap: 30px;
  padding: 0 15px 15px 15px;
}
@media (min-width: 768px) {
  .hours-page .directions-hours-container {
    grid-template-columns: 58% 42%;
  }
}
@media (min-width: 992px) {
  .hours-page .directions-hours-container {
    grid-template-columns: 66% 33%;
  }
}

/*# sourceMappingURL=hours.css.map */