.contactCardContainer {
  display : flex;
  flex-direction : row;
  justify-content : center;
  align-items : center;
  flex-wrap : wrap;
  width : 90%;
  height : auto;
  margin : 20px;
  padding : 0;
}

.contactCard {
  background-color : indianred;
  height : 310px;
  width : 310px;
  position : relative;
  overflow : hidden;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : flex-start;
  margin : 20px;
  box-shadow: 0 26px 58px 0 rgba(0, 0, 0, .22), 0 5px 14px 0 rgba(0, 0, 0, .18);
  transition-duration : 1s;
}

.backgroundPic {
  background-color : rgb(255,255,255,0.2);
  position : absolute;
  height : 50%;
  width : 100%;
  margin : 0;
  padding : 0;
  top : 0;
  display : block;
  background-size : cover;
  background-position : center;
  transition-duration : 10s;
}

#bg1 {  background-image : url("https://images.unsplash.com/photo-1631889992800-3bc2a3993f2a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjN8fGxpdmluZ3Jvb218ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"); }

#bg2 {  background-image : url("https://media.istockphoto.com/id/1021670950/photo/health-worker-holding-patients-hand.jpg?s=612x612&w=0&k=20&c=cBZCG4mSlGgq9mRMSzTBAXabd7kjSURnlF2aNGjtLtc=");
background-position :left;
; }

#bg3 {  background-image : url("https://media.istockphoto.com/id/1316638351/photo/happy-young-family.jpg?s=612x612&w=0&k=20&c=P_ZmitRJlz1TYef2biCcD1YnQ01lJedCzTdQMEeHzUk="); }

#bg4 {  background-image : url("https://images.unsplash.com/photo-1578574577315-3fbeb0cecdc2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGJ1c2luZXNzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"); }

#bg5 {  background-image : url("https://cdn.pixabay.com/photo/2017/09/07/08/54/money-2724241__340.jpg"); }

#bg6 {  background-image : url("https://cdn.pixabay.com/photo/2018/05/13/18/06/natural-cosmetics-3397277__340.jpg"); }

#bg7 {  background-image : url("https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NTl8fGJ1c2luZXNzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"); }

#bg8 {  background-image : url("https://images.unsplash.com/photo-1559305616-3f99cd43e353?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8Y2FmZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"); }

#bg9 {  background-image : url("https://images.pexels.com/photos/7735630/pexels-photo-7735630.jpeg?auto=compress&cs=tinysrgb&w=600"); }

#bg10 {  background-image : url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"); }

#bg11 {  background-image : url("https://images.unsplash.com/photo-1577410114274-ef015b5b6d29?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjN8fGdsYXNzZXN8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"); }

#bg12 {  background-image : url("https://images.unsplash.com/photo-1533444273691-ebf51af8fd9c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8ZWxkZXJseSUyMGNvdXBsZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"); }

#bg13 {  background-image : url("https://images.unsplash.com/photo-1508873699372-7aeab60b44ab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NjN8fGZpbmFuY2V8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"); }

#bg14 {  background-image : url("https://images.unsplash.com/photo-1610818647551-866cce9f06d5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2l0eSUyMHN0cmVldHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"); }

#bg19 {  background-image : url("https://images.pexels.com/photos/4112236/pexels-photo-4112236.jpeg?auto=compress&cs=tinysrgb&w=600"); }

#bg15 {  background-image : url("https://images.pexels.com/photos/9555098/pexels-photo-9555098.jpeg?auto=compress&cs=tinysrgb&w=600"); }

#bg16 {  background-image : url("https://plus.unsplash.com/premium_photo-1661331692770-1599fdab7171?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c29sdXRpb258ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"); }

#bg17 {  background-image : url("https://images.unsplash.com/photo-1615107899082-044cc1133649?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDB8fG5vdGVib29rfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"); }

#bg18 {  background-image : url("https://images.unsplash.com/photo-1555532538-dcdbd01d373d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8a2V5Ym9hcmR8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60"); }



.cardInfo {
  background-color : white;
  height : 80%;
  width : 100%;
  margin : 0;
  padding : 15px;
  position : absolute;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  top : 50%;
  transition-duration : 0.7s;
}

.staticCardInfo {
  background-color : white;
  height : 50%;
  width : 100%;
  margin : 0;
  padding : 20px;
  position : absolute;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  top : 50%;
  transition-duration : 0.7s;
}

.cardInfo > h3, .staticCardInfo > h3 {
  font-family : var(--bodyFont);
  font-weight : bold;
  font-size : 22px;
  max-width : 90%;
  padding : 0;
  margin : 0;
}

.cardInfo > p, .staticCardInfo > p {
  font-weight : 500;
  letter-spacing : 2px;
  margin : 5px;
  padding : 0;
  max-width : 90%;
}

.pfp {
  width : 90px;
  height : 90px;
  border-radius : 100px;
  position : absolute;
  top : -50px;
  left : 37%;
}

.contactButton {
  opacity : 0;
}

.contactCard:hover > .cardInfo {
  top : 25%;
}

.contactCard:hover > .cardInfo > a > .contactButton {
  opacity : 1;
}

.contactCard:hover {
  transform : scale(1.05);
}

.contactCard:hover > .backgroundPic {
  transform : scale(1.5);
}

/* Card Backgrounds */

@media screen and (max-width: 980px) {

  .contactCardContainer {
    flex-direction : column;
    flex-wrap : nowrap;
    width : 90%;
    margin : 20px;
  }

  .contactCard {
    width : 70vw;
    height : 70vw;
  }

  .cardInfo {
    background-color : white;
    height : 80%;
    width : 100%;
    margin : 0;
    padding : 15px;
    position : absolute;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    top : 50%;
    transition-duration : 0.7s;
  }

  .staticCardInfo {
    background-color : white;
    height : 50%;
    width : 100%;
    margin : 0;
    padding : 20px;
    position : absolute;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    top : 50%;
    transition-duration : 0.7s;
  }

  .pfp {
    width : 24vw;
    height : 24vw;
    border-radius : 30vw;
    position : absolute;
    top : -12vw;
    left : 34%;
  }

}