<style>

body {
  background-color: #cc9966;
}

h1 {
  font-family: Arial;
  color: saddlebrown;
  font-size: 60px;
  text-align: center;
}

p {
  font-family: Arial;
  font-size: 25px;
  text-align: center;
  
}

body {
  background-color: #cc9966;
}

section {
  display: grid;
  justify-content: center;
  align-content: center;

  gap: 4px;
  grid-auto-flow: column;
}

/* Adding 4 Columns */

.column {
  float: left;
  width: 25%;
  padding: 20px;
  /* height: 325px;  Should be removed. Only for demonstration */
  width: 350px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both; 
}

/*  NEW Swapping Photos CSS  */
.figure {
	position: relative;
	width: 325px; /* can be omitted for a regular non-lazy image */
    max-width: 100%;
  }

.figure img.Sirv.image-hover {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    object-fit: contain;
    opacity: 0;
    transition: opacity .2s;
  }

.figure:hover img.Sirv.image-hover {
    opacity: 1;
  }


</style>