/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

.img-card {
      position: relative;
      display: inline-block;
      line-height: 0; /* removes gap below image */
	  aspect-ratio: 4 / 3;       /* maintains 3:4 ratio automatically */
      border-radius: 12px;
      overflow: hidden;
    }

    .img-card img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    /* Overlay container */
    .overlay {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,0.35);
      opacity: 0;
      transition: opacity 180ms ease-in-out;
    }

    /* The clickable word */
	.overlay a,
	.overlay a:visited,
	.overlay :any-link,
	.overlay a:hover,
	.overlay a:active {
	  font: 700 1.25rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	  color: black;
	  text-decoration: none;
	  background: rgba(0,0,0,0.55);
	  padding: .5rem .8rem;
	  border-radius: .5rem;
	  outline: none;
	}

    /* Show overlay on hover or when the link is focused (keyboard accessible) */
    .img-card:hover .overlay,
    .img-card:focus-within .overlay {
      opacity: 1;
    }

    /* Focus style for accessibility */
    .overlay a:focus-visible {
      box-shadow: 0 0 0 3px white, 0 0 0 6px #2b74ff;
    }