*{
    box-sizing:border-box;
}
body{
    font-family:sans-serif;
    line-height:1.6;
    min-height:100vh;
    /* display grid and place items keeps things center*/
    display:grid;
    place-items:center;
    background-color: #0A0C1B;
}
@media (max-width:600px){
.grid_container{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-template-rows: 1fr 2fr;
    justify-items:stretch;
    grid-row-gap:5%;
    padding-top:10%;
   
}
.card{
    box-shadow: 0 0 20px rgb(0,0,0,0.2);
    width:80%;
    
    background:#1C1938;
    color:#FDFDFF;
    text-align:center;
    border-radius:25px;
   
}
.grid-1{
   /*border:3px solid white;*/
    padding-left:15%;
    padding-bottom: 10%;
    grid-column: 1/3;
    grid-row:2/3;
    margin-top:0;
}
.grid-2{
    grid-column: 1/3; 
    
}
h1,p{
    text-align: center;
}
p{
    opacity: 0.8;
}
#highlight{
    color:violet;
}
.items{
    list-style-type: none;
    display:flex;
    flex-direction: column;
    margin:0;
    padding-bottom:10%;
    margin-bottom: 15%;
   /* border:3px solid white;*/
    justify-content: center;
    
}
/*hh*/
.item{
    display: inline-block;
    text-align: center;
    /*border:1px solid white;*/
    padding:10% 10% 5% 0%;
   
}
.big{
    font-size: 1.2em;
    font-weight: bold;
}
.subtext{
    text-transform: uppercase;
    font-size: 0.8em;
    opacity: 0.8;
}
/* adding overlay on the image*/
.container{
    background:url(images/image-header-mobile.jpg);
    position:relative;  
    height:auto;
    width:100%;
    border-top-left-radius: 5%;
    border-top-right-radius: 5%;
    
}
.color-overlay{
    width:100%;
    height:100%;
    background:#A360D3;
    opacity:.7;
    position:absolute;
    border-top-left-radius: 5%;
    border-top-right-radius: 5%;
/* end of overlay */
}
}



@media (min-width:600px){
   
    .grid_container{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    justify-items:stretch;
    grid-gap:10%;
   
}
.card{
    box-shadow: 0 0 20px rgb(0,0,0,0.2);
    width:80%;
    
    background:#1C1938;
    color:#FDFDFF;
    text-align:center;
    border-radius:4px;
   
}
.grid-1{
   /* border:3px solid white;*/
    padding-left:15%;
    padding-top:10%;
    padding-bottom: 10%;
}
h1,p{
    text-align: left;
}
p{
    opacity: 0.8;
}
#highlight{
    color:violet;
}
.items{
    list-style-type: none;
    display:flex;
    margin:0;
    padding:0;
   /* border:3px solid white;*/
    justify-content: space-between;
    
}
.item{
    display: inline-block;
    text-align: left;
    /*border:1px solid white;*/
    padding:10% 10% 5% 0%;
   
}
.big{
    font-size: 1.2em;
    font-weight: bold;
}
.subtext{
    text-transform: uppercase;
    font-size: 0.8em;
    opacity: 0.8;
}
/* adding overlay on the image*/
.container{
    background:url(images/image-header-mobile.jpg);
    position:relative;  
    height:auto;
    width:100%;
}
.color-overlay{
    width:100%;
    height:100%;
    background:#A360D3;
    opacity:.7;
    position:absolute;
/* end of overlay */
}


}