/*main----------------------------------------*/
body{
  background-color:rgba(245,245,245);
  font-family: sans-serif;
}
main a{
  text-decoration-line:none;
  list-style-type: none;
  color: black;
}
.container{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:auto auto;
  margin:0% 15% 0% 15%;
  padding-left: 2%;
  margin-top:7%;
}
.item{
  width:95%;
  margin-bottom:4%;
  background-color:white;
  box-shadow:0px 10px 15px gray;
}
.item h2{
  margin-left: 2%;
  color:#293f55;
}
.item img{
  width:100%;
  height: 60%;
}
.text{
  background-color: #293f55;
  width:70px;
  color:white;
  padding: 2%;
  position:relative;
  bottom:60%;
}
.item:hover{
  box-shadow:0px 10px 15px lightgray;
  transition: 0.3s;
  text-decoration-line:none;
}
.item i{
  border-radius:20px;
  padding:2%;
  margin-left: 2%;
  letter-spacing:2px;
  box-shadow:0px 0px 15px lightgray;
}
.item p{
  font-size:x-large;
  border-top:solid 2px lightgray;
  margin:10% 2% 5% 2%;
}
@media only screen and (max-width: 600px) {
  .container{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows:auto auto;
    margin:0px ;
    padding:3%;
    margin-top:20%;
  }
  .item{
    width:100%;
  }
  .item img{
    height: 50%;
  }
  .text{
    background-color: #293f55;
    width:70px;
    color:white;
    padding: 2%;
    position:relative;
    bottom:50%;
  }
  .item i{
    text-transform:none;
    border-radius:20px;
    padding:2%;
    margin-left: 2%;
    letter-spacing:2px;
    box-shadow:0px 0px 15px lightgray;
    margin-top: 2%;
  }
}
@media only screen and (max-width:992px) and (min-width:600px){
  .container{
    margin:20% 5% 3% 5%;
  }
  .item img{
    height: 40%;
  }
  .text{
    background-color: #293f55;
    width:70px;
    color:white;
    padding: 2%;
    position:relative;
    bottom:40%;
  }
  .item i{
    border-radius:20px;
    padding:2%;
    letter-spacing:2px;
    margin-top: 2%;
  }
}