.grid {
    display: grid;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: 25px auto 50px;
  }

body {
    font-family: Verdana, sans-serif;
    text-align:center;
  }

h1 {
    padding: 0px;
    Font-weight: normal;
    Font-size: 35px;
    margin: 5px;
    color: #5D7CA6;
}

h2 {
    padding: 0px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 18px;
    font-weight:normal;
    font-style:italic;
    color: grey;
    margin:5px;
    margin-bottom:25px;
}

  /* Code adapted from W3 schools: https://www.w3schools.com/howto/howto_js_image_comparison.asp */

 * {box-sizing: border-box;}

.img-comp-container {
    margin: auto;
    width: 70%;
    padding: 10px;
    position: relative;
    height: 467px; /*should be the same height as the images*/
}

.img-comp-img {
  position: absolute;
  width: auto;
  height: auto;
  overflow: hidden;
}

.img-comp-img img {
  display: block;
  vertical-align: middle;
}

.img-comp-slider {
  position: absolute;
  z-index: 9;
  cursor: ew-resize;
  /*set the appearance of the slider:*/
  width: 40px;
  height: 40px;
  background-color: #5D7CA6;
  opacity: 0.7;
  border-radius: 50%;
}