/*PORTFOLIO*/	
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 700px) {
  .container-1{
  display: block;
  grid-gap: 2rem;
  justify-content: stretch;

  }
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.container-1 {
  margin: 0% 2%;
  padding: 10px;
  border-radius: 10px;
  width: 100%;
}
}

.item{
  font-size: 30px;
  text-align: center;
}
.container-1 > div {
  padding: 1.5rem;
  border-radius: 1rem; 
}
.container-1  img {
  width: 100%;
  height: auto; 
}



   /*PORTFOLIO*/	
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 700px) {
  .container-2{
  display: block;
  grid-gap: 2rem;
  justify-content: stretch;
  text-align: center;
  }
} 



/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.container-2{
  display: grid;
  grid-template-columns: auto auto;
  margin: 2% 20% 2% 20%;
  padding: 10px;
  border-radius: 10px;}
}


.container-2 a:link{
    text-decoration: none;
}
.container-2 a:hover{
    text-decoration:underline;
    color: #fff;
}

.grid-container {
 display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

.grid-container > div {


}
.grid-container > img {

}
   /*PORTFOLIO*/	
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 700px) {
  .container-3{
   display: block;
  grid-gap: 2rem;
  justify-content: stretch;
  }
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.container-3 {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-template-rows: auto;
  grid-template-areas: 
  
}
}




.item {
  font-size: 30px;
  text-align: center;
  margin: 5%;
}

.item img{

}

.container-3 > div {

}

.container-3  img {
  width: 100%;
  height: auto; 
}


   /*PORTFOLIO*/	
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 700px) {
  .container-4{
  display: block;
  grid-gap: 2rem;
  justify-content: stretch;
  text-align: center;
  }
  
} 



/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.container-4{
  display: grid;
  grid-template-columns: auto auto auto auto ;
  margin: 2% 20% 2% 20%;
  padding: 10px;
  border-radius: 10px;}
}


.container-4 a:link{
    text-decoration: none;
}
.container-4 a:hover{
    text-decoration:underline;
    color: #fff;
}