responsive.css

@media only screen and (max-device-width: 960px) {
    /* styles for mobile browsers smaller than 480px; (iPhone) */
 
#Work span.head {
    font-size: 1.75rem;
    font-weight: bolder;
  }
  #Work p.desc {
    font-size: 1.25rem;
    max-width: 50ch;
    text-align: left;   
  }
  .b1 {
    border: 2px solid #bf55cc;    
    font-size: 0.5rem;

}
}
@media only screen and (max-device-width: 700px) {
 
#Work span.head {
    font-size: 1.75rem;
    font-weight: bolder;
  }
  #Work p.desc {
    font-size: 1.25rem;
    max-width: 50ch;
    text-align: left;   
  }
  .b1 {
    border: 2px solid #bf55cc;    
    font-size: 0.5rem;
}
section#Connect .trancBG {
  grid-template-areas:
  "."
  "info"
  "."
   "contact"
   "."
  
  ;
  grid-template-columns: 100%;
  height: 80%;

}
}
@media only screen and (max-device-width: 480px) {
  
  section#Work {
    grid-template-columns: 80vw ;
    gap:5vw;
    grid-template-areas:
     
      "img1 "
      "proj"
      "."
      "img2"
      "proj1"
      "."
      "img3 "
      "proj2"
      ;
    align-content: center;
    justify-items: center;
    row-gap: 2vw;
    row-gap: 2.5vw;
    justify-content: center;
    align-items: center;
    opacity: 0;
    text-align: center;
  }
  #Work .img1 img,
  #Work .img2 img,
#Work .img3 img {
  height: 60%;
  width: 60%;
  border: rgb(73, 71, 71) 1px solid;
  
}
#Work span.head {
  font-size: 1.5rem;
  font-weight: bolder;
}
#Work p.desc {
  font-size: 1rem;
  max-width: 50ch;
  text-align: left;   
}
section#Connect .trancBG .info .head {
  font-size: 1.5rem;
}
section#Connect .trancBG .contact .head {
  font-size: 1.5rem;
 
}
section#Connect .trancBG .info .desc {
  font-size: 0.85rem;
}
}