.prv { text-align: left ; font-size: 130%; margin: 10px; }
.nxt { text-align: right ; font-size: 130%; margin: 10px; }
.cls { font-size: 130%; margin: 10px; }

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
  grid-gap: 45px;
  SKIP-grid-auto-flow: dense;
    
}
.container img {
  width: 100%;
  height: 100%;
}
.horizontal{
  grid-column: span 2;
}
.vertical {
  grid-row: span 2;
}
.big{
  grid-column: span 2;
  grid-row: span 2;
}
img { box-shadow:  0 5px 10px 0 rgba(0, 0, 0, 0.2), 0 7px 23px 0 rgba(0, 0, 0, 0.19); }
body { margin: 10px 100px 100px 100px ; }
 a { margin:5px ; padding: 10px; border-radius: 5px; }
 hr { margin: 20px 10px ; }
div { text-align: center; vertical-align:center;  margin: auto; }
p   { line-height:40px;margin-bottom:15px;border-bottom: dotted;padding:10px; border-color:lightgray; }

@keyframes Start {
  from {
    transform: scale(0);
    zoom: 0;
  }
  to {
    transform: scale(1);
    zoom: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    display: none ;
    max-height: 0%;
    max-width: 0%;
    transform: scale(0);
    zoom: 0;
  }
  to {
    opacity: 1;
    display: block ;
    max-height: 100%;
    max-width: 100%;
    transform: scale(1);
    zoom: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
	display: block ;
	max-height: 100%;
	max-width: 100%;
	transform: scale(1);
	zoom: 1;
  }
  to {
  opacity: 0;
	display: none ;
	max-height: 0%;
	max-width: 0%;
	transform: scale(0);
	zoom: 0;
  }
}
.hide {
  animation: fadeOut 1s ease-out forwards;
}
.show {
  animation: fadeIn 1s ease-in forwards;
}
img {
  animation: Start 1s ease-in forwards;
}