/*
  FLUIDITY v0.1.0
*/
/*
  Responsive Utilities
*/
img, canvas, iframe, video, svg, select, textarea {
  max-width: 100%; }

/* Wrap tables or pre elements in a div with this class */
.overflow-container {
  overflow-x: scroll; }

/*
  Aspect ratios for media objects i.e canvas, iframe, video, svg etc.
  Defaults to 16x9
*/
.aspect-ratio {
  height: 0;
  padding-top: 56.25%;
  position: relative; }

.aspect-ratio--object {
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}
  
/* Document styles */

body {
  background: #ddd;
  font-family: sans-serif;
  color: #333;
}
.vaf {opacity: 0.6; padding: 20px;}
.dt {float: right; opacity: 0.6; padding: 20px;}
@media (max-width: 600px) {
.vaf, .dt {
	width: 100px;
	padding: 10px;
  }
}
main {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 0.5rem;
}
main img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  filter: grayscale(100%);
}

main img:hover {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    filter: grayscale(0%);
    z-index: 100;
    transition: 0.4s;
    cursor: pointer;
}
main a:hover { z-index: 100;}
article {
  max-width: 1300px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 20px;
}
article a {
  text-decoration: none;
  color: #9F3737;
}
article a:hover {
  color: #000;
}