/* Add your custom CSS code here */
h1.page-heading{
    font-family: Montserrat,Arial,Helvetica,sans-serif;
}

#product-listing-container p{
    font-family: Montserrat,Arial,Helvetica,sans-serif;
}

/* hero description layout */
.hero-column-text{
  float: left;
  width: 50%;
  padding: 20px;
  vertical-align: middle;
}

.hero-column-image{
  float: left;
  width: 50%;
  height: auto;
}

.hero-column-image img{
	width: 100%;
    height:100%;
    max-height: 450px;
    object-fit:cover;
}

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

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .hero-column-image, .hero-column-text {
    width: 100%;
  }
}

/* Squares grid styles */
.squares-wrapper {
    display: flex;
    justify-content: center;
}

.squares-wrapper > .squares {
    width: 1200px;
}

.squares-wrapper > .squares > .square {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.square > .img-wrapper img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.squares-wrapper > .squares > .square {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: -1px;
}

.square > .square-text-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding: 42px;
}

/* Helpers */
.spacer100 {
    height: 100px;
    width: 100%
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .img-wrapper, .square-text-wrapper {
    width: 100%;
  }
}