/*** COMMON DIV TO CENTER CONTENTS ********************************************/



.img-society {
float: left; 
margin-top:0.25em;
margin-right: 1em;
margin-bottom: 0.5em;
height:270px;
width:425px;
}



.div-society-center {
    box-sizing: border-box;
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    padding:2em;
    width:100%;
    
}

/*** COMMON GRID DIVISION FOR SIDE BY SIDE: COLUMNS DEFIBED IN EACH CSS *******/


.div-society-grid{
    display:grid;
    gap:2em;
    max-width:1200px;
    width:100%;
}    



.button-society {
    background-color:#800;
    border:none;
    /*border-bottom-left-radius:0.5em;
    border-bottom-right-radius:0.5em;*/
    color:white;
    /*font-family: 'EB Garamond';*/
    font-size:1em;
    padding:0.5em 1em 0.5em 1em;
}


.button-society:hover {
    text-decoration:underline;
}



.div-society-align {
    display:grid;
    grid-template-columns: 1fr;
    justify-items:center;
    width:100%;
}


.div-society-content {
    background-color:beige;
    /*border-top-right-radius:0.5em;
    border-bottom-right-radius:0.5em;*/
    flex:1;
    margin-top:-2em;
    padding:1em 0 3em 0;
    width:95%;
}


.div-society-frame {
    aspect-ratio:0.75;
    width:100%;
}


.div-society-grid {
    grid-auto-rows: max-content;    
    grid-template-columns: 1fr 1fr 1fr 1fr;
}


.div-society-image {
    background-size:cover;
    /*border-radius:0.5em;*/
}


.div-society-item {
    display:flex;
    flex-direction:column;
    height:100%;
    max-width:300px;
}


.div-society-text {
    font-size:1em;
    margin:1em 0.5em 0 0.5em
}

.div-society-title {
    color:#115;
    font-size:1.2em;
    font-weight:bold;
    margin-left:0 0.5em 0 0.5em;
}


@media only screen and (max-width: 1150px) { 
 
    .div-society-grid {
        grid-template-columns: 1fr 1fr 1fr;    
    }
}    


@media only screen and (max-width: 1000px) { 
 
    .div-society-grid {
       grid-template-columns: 1fr 1fr;    
    }
}    
    
@media only screen and (max-width: 720px) { 
    
    .div-society-content {
        width:285px;
    }    
    
    .div-society-frame {
        width:300px;
    }

    .div-society-grid {
       grid-template-columns: 1fr;    
    }
}


@media only screen and (max-width: 500px) {.img-society{max-width:100%;width:auto;height:auto;}}