.card {
    display: inline-block;
    border: 1px solid black;
    margin-bottom: 10px;
  }

  .content {
    position: relative;
  }

  .caption {
    position: relative;
    text-align: center;
    background-color: lightgray;
    font-size: x-large;
  }

  .overlay {
    width: 44px;
    position: absolute;
    right: 0px;
    bottom: 0px;
  }

@media (orientation: landscape) and (height < 241px) {
  .picture {
    width: 158px;
    display: block;
   }
}   
    
@media (orientation: landscape) and (240px < height < 487px) {
  .picture {
    width: 240px;
    display: block;
   }
}   

@media (orientation: landscape) and (height > 486px) {
  .picture {
    width: 343px;
    display: block;
   }
}   

@media (orientation: portrait) {
  .picture {
    width: 100%;
    display: block;
  }
}