.card {
  position: relative;
  grid-area: card;
  align-self: center;
  justify-self: center;
  overflow: hidden;
  display: block;
  margin: auto;
  /*width: 60vw;*/
  max-width: 1000px;
  height:30vw;
  max-height: 400px;
  /* border-radius: 14px; */
  /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/
  cursor: pointer;
  margin-top: 40px;
  margin-bottom: 40px;
  border-top: 1px solid black;

}
.mediumCard{
  position: relative;
  grid-area: card;
  align-self: center;
  justify-self: center;
  overflow: hidden;
  display: block;
  margin: auto;
  max-width: 1200px;
  width: 90vw;
  height:35vw;
  max-height: 370px;
  box-shadow: 0 1px 10px rgba(0,0,0,0.12), 0 1px 10px rgba(0,0,0,0.24);
  border-radius: 10px;
  cursor: pointer;
  margin-top: 30px;
  margin-bottom: 40px;
  background-color:white;
  border: 4px solid black;
}

.mediumImage{
  position:relative;
  width: 25%;
  height: 70%;
  max-height: 30vw;
  top :15%;
  left: 70%;
  max-height: 30vw;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

.mediumContent{
  position: absolute;
  /* top :18%; */
  width: 60%;
  height: 80%;
  margin: 2.8% 5%;
}

.mediumTitle{
  font-family: 'Roboto';
  font-weight: bold;
  color: black;
  font-size: 30px;
}
.mediumDescription{
  margin-top: 1.2vw;
  font-family: Kano;
  text-align: justify;
  font-size: 18px;
}
.mediumAuthor{
  position: absolute;
  bottom: 20px;
  font-family: 'Roboto';
  font-weight: 500;
  text-align: justify;
  font-size: 15px;
  color: black;
}
.mediumDetails{
  position: absolute;
  bottom: 0px;
  font-family: ' Roboto', sans-serif;
  font-size: 13px;

}

.cardTitle{
  font-family: Kano;
  color: rgb(21, 90, 164);
  font-size: 30px;
}

.CardContent{
  position: absolute;
  top: 20px;
  width: 50%;
  left: 40%;
  margin: 0% 5%;
}

.CardContent hr {
  border-color: rgba(0, 0, 0, 0.15);
}

.cardSubtitle{
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  color: #525252;
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.cardPhoto{
  width: 40%;
  height: 400px;
  max-height: 30vw;
  max-width: 400px
  object-fit: cover;
  background-size: cover;
  background-position: center;
  transition: transform .2s;
}

.cardPhoto:hover {
  transform: scale(1.1);
}

.cardDescription{
  font-family: 'ITCGaramondStd-LtCond', sans-serif;
  font-size: 1.2rem;
}

/* Modern responsive media queries */
@media (max-width: 1000px) {
  .cardTitle{font-size: 20px; top:10px;}
  .cardSubtitle{font-size: 14px;}
  .cardDescription{font-size: 12px;}
  .card{width: 70vw;min-height: 35vw;}
  .cardPhoto{max-height: 35vw;}
  .mediumDescription{font-size: 14px}
  .mediumTitle{font-size: 24px}
  .mediumAuthor{font-size: 12px}
  .mediumCard{height: 300px;   border: 0px;}
  .mediumContent{margin: 30px 5%;}
}
@media (max-width: 700px) {
  .cardTitle{font-size: 16px; top:8px;}
  .cardSubtitle{font-size: 12px;}
  .cardDescription{font-size: 12px;}
  .card{width: 80vw;min-height: 80vw; max-height: 100vw}
  .cardPhoto{width: 100%;max-height: 30vw;}
  .CardContent{position: absolute;top: 35vw;width: 90%;left: 0%; margin: 0 5%;}
  .mediumDescription{font-size: 12px}
  .mediumAuthor{font-size: 11px; bottom: 15px}
  .mediumDetails{font-size: 11px; bottom: 0;}
  .mediumCard{height: 360px;max-height:400px;  border: 0px;}
  .mediumTitle{font-size: 20px}
  .mediumContent{margin: 5px 5%; position: absolute;top: 45%;width: 90%; height: 50%}
  .mediumImage{width: 100%;max-height: 150px; left: 0; top: 0;}
}