@media only screen and (max-width: 992px) {
    /* START GRID SYSTEM */
    .container {
        padding: 0px 16px;
    }
    section {
        padding: 16px 24px;
    }
    /* END GRID SYSTEM */
    /* START MENU */
    .desktop-menu {
        display: none;
    }
    .mobile-menu {
        display: block;
    }
    .mobile-menu ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 16px;
        padding: 10px 20px;
        margin: 0px;
    }
    .mobile-menu .menu-item {
        list-style: none;
        text-align: center;
        border: 1px solid silver;
        border-radius: 10px;
        padding: 10px 0px;
        background-color: var(--shazootheme--color--button--link);
        color: var(--shazootheme--color--primary) !important;
        border: 1px solid var(--shazootheme--color--primary);
    }
    .mobile-menu .menu-item:hover {
        color: var(--shazootheme--color--secondary) !important;
    }
    .mobile-menu .menu-item > a {
        color: var(--shazootheme--color--primary);
        font-weight: bold;
        text-decoration: none;
        display: block;
        font-size: 14px;
        text-transform: uppercase;
    }
    .mobile-menu .menu-item > a:hover {
        text-decoration: underline;
    }
    .mobile-menu .menu-item > a:link,
    .mobile-menu .menu-item > a:visited {
        color: var(--shazootheme--color--secondary);
    }
    /* END MENU */
    /* START HERO */
    .hero-slider-cta {
        flex-direction: column;
    }
    /* END HERO */
}

@media only screen and (max-width: 420px) {
    :root {
        --shazootheme--font--size--text: 14px;
        --shazootheme--font--size--h1: 28px;
        --shazootheme--font--size--h2: 24px;
        --shazootheme--font--size--h3: 19px;
        --shazootheme--font--size--h4: 16px;
    }
    body {
        font-family: Helvetica, Arial, sans-serif;
    }

    /* START GRID SYSTEM */
    section {
        padding: 16px 0px;
    }
    /* END GRID SYSTEM */

    /* START UTILITIES */
    .no-mobile {
        display: none;
    }
    .only-mobile {
        display: block !important;
    }
    /* END UTILITIES */

    /* START BREADCRUMB */
    #breadcrumbs {
        font-size: 1em !important;
        line-height: 1.2em;
        color: #452300;
    }
    #breadcrumb a:link,
    #breadcrumb a:visited {
        color: #452300;
    }
    #breadcrumb {
        text-align: left;
    }
    /* END BREADCRUMB */

    #sezione-secondaria {
        width: 100%;
    }
    #sezione-secondaria h1 {
        font-size: 2.8em;
        line-height: 1.2em;
        color: #452300;
    }
    #sezione-secondaria .card {
        float: none;
        width: 100%;
        margin: 0 0 2em;
    }
    #sezione-secondaria .card img {
        width: 100%;
        height: 100%;
        border: 0px;
    }
    #sezione-secondaria .card h2 {
        font-size: 2.2em;
        line-height: 1.2em;
        padding: 0 4px;
        color: #452300;
    }
    #sezione-secondaria .card p {
        font-size: 1.7em;
        line-height: 1.2em;
        padding: 0 4px;
    }
    .content-container h2 {
        /* margin-top: 20px; */
        /* margin-bottom: -10px; */
        font-size: 24px;
        line-height: 30px;
    }
    /* .content-container p {
        font-size: 1.6em;
        line-height: 1.3em;
    } */
    .content-container img {
        height: 100%;
        width: 100%;
    }
    .content-container ul {
        padding-inline-start: 30px;
    }
    .content-container li {
        font-size: 20px;
        line-height: 30px;
    }
    span.wpcf7-list-item {
        width: 80%;
    }
    /* START TEXTS */
    .section-title {
        font-size: 24px;
        padding: 8px 0px;
        line-height: 30px;
    }
    /* END TEXTS */

    /* START HEADER */
    .top-header {
        display: none;
    }
    /* END HEADER */

    .fouricons h2 {
        height: 10px;
    }
}

@media only screen and (max-width: 320px) {
    /* START MENU */
    .mobile-menu .menu-item > a {
        font-size: 12px;
    }
    /* END MENU */

    /* START TEXTS */
    .section-title {
        font-size: 20px;
    }
    /* END TEXTS */

    .fouricons h2 {
        height: 10px;
    }
}