#article{
    --map-h: 862px;
}

#article .agences{
    --ag-per-row: 3;
    --ag-w: 442px;
    --ag-ct-w: 398px;
    --ag-pin-s: 30px;
    --ag-title-s: 25px;
    --ag-text-s: 21px;
    --ag-p: 20px;
}

#article .map{min-height:var(--map-h);margin-top: 1.5%; position: relative; z-index: 0;}
#article .agences{display: grid; grid-template-columns: repeat(var(--ag-per-row), var(--ag-w)); justify-content: space-between;margin-top: 2%; margin-bottom: 5.5%;padding: 0 20px;}
#article .agence{border: var(--red) 5px solid; display: flex; justify-content: center; align-items: center; border-radius: 15px;padding: var(--ag-p); height: 100%;}
#article .agence .agence-content{border: black 2px solid; padding-top: 8%;border-radius: 10px; width: var(--ag-ct-w); height: 100%}
#article .agence *{text-align: center; color: black}
#article .agence .pin{font-size: var(--ag-pin-s);}
#article .agence .title{font-size: var(--ag-title-s); margin-top: 3%;margin-bottom: 0;text-transform: uppercase;}
#article .agence .address, .agence .contact, #article .agence .hours{font-size: var(--ag-text-s); line-height: 1.1em;}
#article .agence .hours{margin-top: 12%;}
#article .agence .title, .agence .contact{font-weight: bold}
#article .agence .contact{margin-top: 12%;text-transform: uppercase;}
#article .agence .contact a, #article .agence .address a{transition: color .3s ease; will-change: color;}
#article .agence .contact a:hover, #article .agence .address a:hover{color: var(--red);}


@media (max-width: 1630px){
    #article{
        --bkpt: 1630;
        --map-h: calc(100vw * 862 / var(--bkpt));
    }

    #article .agences{
        --ag-w: calc(100vw * 442 / var(--bkpt));
        --ag-ct-w: calc(100vw * 398 / var(--bkpt));
        --ag-pin-s: calc(100vw * 30 / var(--bkpt));
        --ag-title-s: calc(100vw * 25 / var(--bkpt));
        --ag-text-s: calc(100vw * 21 / var(--bkpt));
        --ag-p: calc(100vw * 20 / var(--bkpt));
    }
}

@media (max-width: 1024px){
    #article{--bkpt: 1920;}
    #article .agences{--bkpt: 1600;}
}

@media (max-width: 768px){
    #article .agences{
        --bkpt: 768;
        --ag-per-row: 1;
        padding: 0;
        gap: 15px;
        justify-content: space-around;
    }
}

@media (max-width: 480px){
    #article{--bkpt: 1024;}
    #article .map{margin-top: 20px;}
    #article .agences{
        --bkpt: 600;
        --ag-per-row: 1;
        margin-top: 20px;
    }
}