.vector-callouts {
  background-size: cover;
  background: linear-gradient(0deg, rgba(35, 31, 32, 0.05), rgba(35, 31, 32, 0.05)), rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(3px);
  overflow-y: hidden;
  padding-top: 2rem;
  margin-bottom: 8rem;
}

@media (min-width: 900px) {
  .vector-callouts {
    margin-bottom: unset;
    padding-top: unset;
  }
}

.vector-callouts__inner {
  display: flex;
  position: relative;
  flex-direction: column;
  text-align: center;
}

@media (min-width: 900px) {
  .vector-callouts__inner {
    padding: 7rem 4rem;
    /* top: -1rem; */
  }
}

.vector-callouts__background-blur {
  position: absolute;
  z-index: 0;
  left: -32rem;
  top: 18rem;
  z-index: 0;
  opacity: 0.4;
}

@media (min-width: 900px) {
  .vector-callouts__background-blur {
    top: unset;
    bottom: -24rem;
  }
}

@media (max-width: 540px) {
	.vector-callouts__headline {
	  font-size: 5rem!important;
	  margin: 2rem 0;
	  letter-spacing: 0.01rem;
	}
}

@media (min-width: 900px) {
  .vector-callouts__headline {
    font-size: 6rem;
    margin: 0 0 3rem;
  }
}

.vector-callouts__intro-text {
  font-size: 1.6rem;
  width: 90%;
  margin: 0 auto;
  line-height: 3.7rem;
}

@media (min-width: 900px) {
  .vector-callouts__intro-text {
    font-size: 2.1rem;
    max-width: 60rem;
    letter-spacing: 1px;
  }
}

.vector-callouts__callouts {
  display: flex;
  flex-direction: column;
  padding: 5rem 0 0;
}

@media (min-width: 900px) {
  .vector-callouts__callouts {
    flex-direction: row;
    justify-content: space-evenly;
    padding: 2.5rem 0 0;
  }
}

.vector-callouts__callout { 
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 2rem;
}

.down-arrow {
  position: relative;
  height: 50px;
}

.down-arrow .icon--down-arrow {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}


@media (min-width: 900px) {
  .down-arrow {
    padding-top: 3rem;
  }
}


.vector-callouts__callout-icon {
  height: 10rem;
  width: 10rem;
  object-fit: contain;
  margin: 0 auto;
}

.vector-callouts__callout-title {
  font-size: 2.8rem;
  font-weight: bold;
  margin: 2rem auto;
  text-align: center;
  max-width: 90%;
}


.vector-callouts__callout-cta {
  text-decoration: none;
  font-size: 1.6rem;
  font-family: 'Inter';
  font-weight: 500;
}

.vector-callouts__callout-cta:hover {
  text-decoration: underline;
}