@media screen and (min-width: 64rem) /* 1024px */ {

    :root {
        
        /* SPACING */
        --min-content-width: 53.375rem; /* 854px = 53.375rem */
        --max-content-width: 100rem; /* 1600px = 100rem */
        --content-width: clamp(var(--min-content-width), 95vw, var(--max-content-width));
        --content-width-percentage: 83.3333%;
    
        /* FONT */

        --h1-size: clamp(2.5rem, 2.917vw, 3.5rem); /* 56px */
        
        --h3-size: clamp(1.5rem, 1.35vw, 1.625rem); /* 26px */
    
        --h4-size: clamp(1.5rem, 1.33vw, 2rem);
        --h4-line-height: 1.25;

        --p-line-height: 1.5;

        --text-size-large: 1.25rem; /* 20px */
        --p-l-size: 1.25rem;/* 20px */

        --padding-y: min(4.1666vw, 5rem); /* 80px */
        --padding-x: min(8.3333vw, 10rem); /* 160px */
        --padding-card: 2.5rem; /* 40px */

        --Border-button-radius: .75rem;
        --Border-button-rounded: 2.5rem;
    }

    main {
        padding-top: var(--page-padding-top);
    }

    main:has(h1.page-blueBanner--title) > .content-width > *:not(.cta) {
        width: 100%;
    }

    .primary-button:focus{
        background-color: var(--dark-red);
        border:0.2rem var(--white) dashed;
        color:var(--white);
    }
    
    .primary-button:active{
        background-color: var(--bg-red-light);
        color: var(--red);
        border:none;
    }
    
    .secondary-button:focus{
        background-color: var(--white);
        border:0.2rem var(--red) dashed;
        color: var(--red);
    }

    .secondary-button:active{
        background-color: var(--bg-red-light);
        color: var(--red);
        border:0.2rem var(--red) solid;
    }

    .link:focus{
        color: var(--red);
        text-decoration: underline dashed var(--red) 3px;
    }

    .link:active{
        color: var(--red);
        text-decoration: underline solid var(--red) 3px;
    }

    .tag:focus{
        background-color: var(--dark-red);
        border:0.2rem var(--white) dashed;
        color:var(--white);
        border-radius: 0.75rem;
    }

    .tag:active{
        background-color: var(--red);
        border:none;
        color:var(--white);
        border-radius: 0.75rem;
    }

    .icon-button-primary:focus{
        background-color: var(--dark-red);
        border:0.2rem var(--white) dashed;
        color:var(--white);
        border-radius: 0.75rem;
        padding: 0.7rem;
    }
    
    .icon-button-primary:active{
        background-color: var(--bg-red-light);
        color: var(--red);
        border:none;
        border-radius: 0.75rem;
        padding: 0.7rem;
    }

    .icon-button-secondary:focus{
        background-color: var(--white);
        border:none;
        color: var(--red);
    }

    .icon-button-secondary:active{
        background-color: var(--bg-red-light);
        color: var(--red);
        border:0.2rem var(--red) solid;
        border-radius: 0.75rem;
        padding: 0.7rem;
    }

    /* CUSTOM CLASSES */

    .mobile-only {
        display: none !important;
    }

    .mobile-tablet-only {
        display: none !important;
    }

    .tablet-only {
        display: none !important;
    }

    .tablet-desktop-only {
        display: block;
    }

    .desktop-only {
        display: block;
    }

    /* MISC */
    .bg-to-edge__mobile:before {
        display: none !important;
    }

    .bg-to-edge__desktop:before {
        display: block !important;
    }

    .background-pattern{
        background-image: url("../img/pattern_vichy.png");
        /* background-size: 50%; */
        background-repeat: repeat;
        background-position: right;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left:50%;
    }

    .background-pattern-row{
        height:100%;
    }

    .background-pattern-color{
        height: 100%;
    }
}