:root {
    /* HR */
    --hr-margin: 20px 0;

    /* GRID CARD */

    --gap-row-grid-card: 15px;
    --gap-col-grid-card: 15px;

    --template-grid-card-col: repeat(auto-fit, minmax(200px, 1fr));
    --template-grid-card-row: 1fr;

    /******************************/
    --max-width-global: 1200px;
    --gap-grid-body: 5px;    

    --border-test: none;
    --fondo-test: none;
/*   
    --border-test: 1px solid black;
    --fondo-test: rgba(10,10,10,0.1);

    */    

    --fondo-header: rgba(131, 0, 0,0.6);
    --fondo-menu: rgba(0, 52, 131, 0.5);
    --fondo-footer: rgba(131, 79, 0, 0.5);

    --height-header: 27px;
    --height-menu: 100px;
    --height-footer: 100px;

    --posicion-menu: 32px;

    --padding-tablet: 0 25px;
    --padding-mobil: 0 10px;
}

hr {
    margin: var(--hr-margin);
}


.config-card-grid {
    display: grid;

    row-gap: var(--gap-row-grid-card);
    column-gap: var(--gap-col-grid-card);

    align-content: center;
    justify-items: start;
    align-items: center;
    
    grid-template-columns: var(--template-grid-card-col);
    grid-template-rows: var(--template-grid-card-row);

    margin: 50px 0;
    border: 1px solid gray !important;
    border-radius: 5px;
    padding: 5px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0; 
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
}

body{

}

/********************************************************/

.fondo-test{
    background-color: var(--fondo-test);
    border: var(--border-test);
}

/********************************************************/


.grid{    
    display: grid;
    gap: var(--gap-grid-body);    
}

.container{    
    max-width: var(--max-width-global);
    margin:10px auto;
    height: 100%;
    
}

@media all and 
(max-width: 1250px) and 
(min-width: 0px) {
    .container{ 
        padding:var(--padding-tablet);
    }
}
@media all and 
(max-width: 600px) and 
(min-width: 0px) {
    .container{ 
        padding:var(--padding-mobil);
    }
}