@import url("https://fonts.googleapis.com/css?family=Poppins:400");
*{
  box-sizing: border-box;
}
html{
  font: 15px/1.6 'Verdana, Arial, Helvetica, ', system-ui, sans-serif;
}
body{
	padding: 2em 1rem;
	text-align: center;
}
[type="radio"]{
  display: none;
}
label{
  padding: 0.25rem 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: 0.25s;
}
[type="radio"]:checked + label{
	background:   #b1dce6;
}
[type="radio"]:nth-of-type(2):checked ~ .gallery .card:not(.animals),
[type="radio"]:nth-of-type(3):checked ~ .gallery .card:not(.nature),
[type="radio"]:nth-of-type(4):checked ~ .gallery .card:not(.people),
[type="radio"]:nth-of-type(5):checked ~ .gallery .card:not(.tech),
[type="radio"]:nth-of-type(6):checked ~ .gallery .card:not(.web),
[type="radio"]:nth-of-type(7):checked ~ .gallery .card:not(.car)
{
  display: none;
}
.gallery{
  display: grid;
	justify-content: center;
  grid-template-columns: repeat(auto-fit, 319px);
  grid-auto-rows: 1fr;
  grid-gap: 1rem;
  padding: 0.5rem;
  margin-top: 1rem;
}
.card{
  margin: 0;
   
  border-radius: 0.25rem;
  overflow: hidden;
   
  transition: box-shadow 0.35s;
}
.card:hover{
  box-shadow: 0 0 25px  black;
}
.card__image{
  width: 100%;
  object-fit: cover;
}
.card__caption{
	font-weight: italic;
  font-variant: small-caps;
  padding: 0.9rem;
  text-align:  left;
  color: black;
}