@visa/nova-styles/base/breakpoints/index.css

Visa Product Design System Nova HTML+CSS library

/**
 *              © 2025-2026 Visa
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
@layer base{:root{--breakpoint-min: 0px;--breakpoint-xs: 320px;--breakpoint-sm: 480px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1440px;--breakpoint-xxl: 1600px;--breakpoint-max: 10000000000px}}@layer utilities{:root .v-hide{display:none}@container (max-width: 479px){.v-xs-container-hide{display:none}}@media only screen and (max-width: 479px){.v-xs-media-hide{display:none}}@container ((min-width: 480px) and (max-width: 767px)){.v-sm-container-hide{display:none}}@media only screen and (min-width: 480px)and (max-width: 767px){.v-sm-media-hide{display:none}}@container ((min-width: 768px) and (max-width: 1023px)){.v-md-container-hide{display:none}}@media only screen and (min-width: 768px)and (max-width: 1023px){.v-md-media-hide{display:none}}@container ((min-width: 1024px) and (max-width: 1439px)){.v-lg-container-hide{display:none}}@media only screen and (min-width: 1024px)and (max-width: 1439px){.v-lg-media-hide{display:none}}@container ((min-width: 1440px) and (max-width: 1599px)){.v-xl-container-hide{display:none}}@media only screen and (min-width: 1440px)and (max-width: 1599px){.v-xl-media-hide{display:none}}@container (min-width: 1600px){.v-xxl-container-hide{display:none}}@media only screen and (min-width: 1600px){.v-xxl-media-hide{display:none}}@container (max-width: 767px){.v-mobile-container-hide{display:none}}@media only screen and (max-width: 767px){.v-mobile-media-hide{display:none}}@container (min-width: 768px){.v-desktop-container-hide{display:none}}@media only screen and (min-width: 768px){.v-desktop-media-hide{display:none}}}