.approach-section-title-wrapper {
  color: var(--prussian);
  font-size: 2vw;
  line-height: 2.5vw;
  margin-bottom: 2vw;
}
/*Hero section----*/
.approach-hero-img {
  width: 90%;
  height: auto;
}
.approach-hero-title-wrapper {
  color: var(--azure);
  font-size: 2.5vw;
  line-height: 3vw;
  margin-bottom: 2vw;
}
.approach-text-wrapper {
  padding: 3vw 0 3vw 3vw !important;
}
.approach-hero-top-margin {
  margin-top: 2vw;
}

/*4 pillars*/
.puzzle-outer-wrapper {
  width: 32vw;
  height: 32vw;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  box-shadow: rgba(0, 0, 0, 0.24) 0.156vw 0.156vw 0px;
}
.puzzle-inner-wrapper {
  height: 16vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1vw;
  line-height: 1.5vw;
  font-weight: bold;
  text-decoration: none;
}
.puzzle-1-wrapper {
  background-image: url(images/1.png);
  background-repeat: no-repeat;
  background-size: 100%;
  color: var(--azure);
}
.puzzle-2-wrapper {
  background-image: url(images/2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  color: var(--azure);
}
.puzzle-3-wrapper {
  background-image: url(images/3.png);
  background-repeat: no-repeat;
  background-size: 100%;
  color: var(--azure);
}
.puzzle-4-wrapper {
  background-image: url(images/4.png);
  background-repeat: no-repeat;
  background-size: 100%;
  color: var(--prussian);
}
.puzzle-1-wrapper:hover,
.puzzle-2-wrapper:hover,
.puzzle-3-wrapper:hover {
  color: var(--azure);
}
.puzzle-4-wrapper:hover {
  color: var(--prussian);
}
.puzzle-btn-wrapper {
  min-height: 2vw;
  margin-top: 0.5vw;
}

/*tools---*/
.approach-tools-size {
  width: 90% !important;
  height: auto !important;
  max-width: 1380px;
}

/*bens bakery*/
.bens-bakery-logo-wrapper {
  width: 13vw;
  margin: auto;
}
.bens-bakery-logo-wrapper img {
  width: 100%;
  height: auto;
  max-width: 300px;
}