/* Responsive flex grid v.1.4.1 */

.flexGrid{
display: flex;
flex: 1 0 auto;
flex-wrap: wrap;
grid-gap: 0;

justify-content: center;
max-width: 100%;
max-width: 800px;
margin: 0 auto;
}

.flexItem {
display: flex;
flex: 1 0 auto;
flex-basis: auto;
flex-direction: column;
min-height: 100%; 

width: auto;
min-width: 45px;
max-width: 100%;
max-width: auto;
margin: 5px;
}

/*
.flexBlock {
display: flex;
flex: 1 0 auto;
flex-wrap: wrap;
gap: 10px;

justify-content: center;
}

.item {
display: flex;
flex: 1 0 auto;
flex-basis: auto;
flex-direction: column;

min-height: 100%; 
width: 100%;
max-width: 200px;

width: auto;
max-width: 100%;
min-width: 1fr;

gap: 0;
}*/

/*
.item {
flex: 1 0 auto;
justify-content: center;
align-items: center;

width: auto;
max-width: 100%;
min-width: 1fr;
gap: 0;
}

.flexBlock {
display: flex;
flex: 1 0 auto;
flex-wrap: wrap;
gap: 10px;
}*/


/*
.item {
display: inline-flex;
flex: 1 0 auto;
margin: 0;
padding: 9px;
justify-content: center;
align-items: center;
align-self: stretch;

width: auto;
max-width: 100%;
min-width: 1fr;
}

.flexBlock {
display: flex;
flex: 1 0 auto;
flex-wrap: wrap;
gap: 1px;
}*/



/* old
.item {
display: inline-flex;
flex: 1 0 auto;
margin: 0;
padding: 9px;
justify-content: center;
align-items: center;


width: 1fr;
max-width: 100%;
min-width: 1fr;
}

.flexBlock {
display: flex;
flex: 1 0 auto;
flex-wrap: wrap;
gap: 5px;
}
*/