/*
<style> /* notice that this entire line is a comment in CSS */

    @media (max-width: 480px) {
        .card3 {
            width: 93vw;
        }

        .modal .swiper-slide {
            width: 18.5rem !important;
        }
        .modal-content{
            width: 100%;
            margin: 0;
        }
        .shadow-hero::before {
            background: radial-gradient(ellipse 50% 78% at center, transparent 10%, black 100%);
        }

        #hero {
            height: 70vh;
        }

        .shadow-hero {
            height: 70vh;
        }

        .hero-slide {
            position: absolute;
            top: 0;
            left: 0;
            transform: unset;
            width: 100%;
            height: 99%;
            background-position: center;

        }

        #hero .details-button {
            margin-top: 1rem;
        }
        .position {
            width: 100%;
        }
        .line{
            width: 8rem;
        }
        .menu-footer-menu-container li {
            margin-top: 1rem;
        }
        .card3-content {
            flex-direction: column;
        }
    }