:root {
  --primary-bg-color: #C9E6EE;
  --primary-color: #496a74;
}


body {
  background: var(--primary-bg-color);
  font-family: "Libre Baskerville";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 700;
  color: var(--primary-color);
  align-items: center;
  max-width: 1500px;
  margin: auto;
  padding: 20px;
}

a:link, a:visited {
  color: var(--primary-color);
}

a:hover, a:active {
  color: #84A98C;
}

.thumbnail {
     font-size: 1vw;
}


.grid-container1 {
  text-align: left;
  display: grid;
  grid-template-columns: 50% 50%;
  max-width: 1500px;
}


.grid-container2 {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  max-width: 1500px;
  column-gap: 20px;
}

.grid-container3 {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  max-width: 1500px;
  column-gap: 20px;
}


.flex-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}