.vision {
  padding-bottom: clamp(100px, 16.667vw, 200px);
}

.vision__section {
  width: 90vw;
  max-width: 1200px;
  margin: 0 auto;
}

.vision__section-header {
  display: flex;
  align-items: end;
  gap: clamp(4px, 0.667vw, 8px);
  flex-wrap: wrap;
}

.vision__section-title {
  font-size: clamp(24px, 4.667vw, 56px);
  font-family: "Josefin Sans Variable", sans-serif;
}

.vision__section-subtitle {
  font-size: clamp(12px, 1.5vw, 18px);
}

.vision__container--padding-top {
  padding-top: clamp(75px, 12.583vw, 151px);
}

.vision__vision-content {
  display: flex;
  gap: clamp(20px, 3.333vw, 40px);
  flex-wrap: wrap;
  padding-top: clamp(24px, 3.917vw, 47px);
}

.vision__vision-text {
  flex: 694;
}

.vision__vision-text h3 {
  font-size: clamp(17px, 2vw, 34px);
}

.vision__vision-paragraphs {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.667vw, 32px);
  font-size: 16px;
  padding-top: clamp(20px, 3.333vw, 40px);
}

.vision__vision-paragraph {
  font-size: 16px;
  line-height: 32px;
}

.vision__vision-image {
  flex: 466;
}

.vision__mission-content {
  display: flex;
  gap: clamp(20px, 3.333vw, 40px);
  flex-wrap: wrap;
  padding-top: clamp(24px, 3.917vw, 47px);
}

.vision__mission-text {
  flex: 684;
}

.vision__mission-text h3 {
  font-size: clamp(17px, 2vw, 34px);
}

.vision__mission-paragraphs {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.667vw, 32px);
  font-size: 16px;
  padding-top: clamp(20px, 3.333vw, 40px);
}

.vision__mission-paragraph {
  font-size: 16px;
  line-height: 32px;
}

.vision__mission-image {
  flex: 476;
}

.vision__brandpromise-content {
  display: flex;
  gap: clamp(20px, 3.333vw, 40px);
  flex-wrap: wrap;
  padding-top: clamp(24px, 3.917vw, 47px);
}

.vision__brandpromise-text {
  flex: 684;
}

.vision__brandpromise-text h3 {
  font-size: clamp(17px, 2vw, 34px);
}

.vision__brandpromise-paragraphs {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.667vw, 32px);
  font-size: 16px;
  padding-top: clamp(20px, 3.333vw, 40px);
}

.vision__brandpromise-paragraph {
  font-size: 16px;
  line-height: 32px;
}

.vision__brandpromise-image1 {
  flex: 476;
}

.vision__brandpromise-image2 {
  flex: 476;
  padding-top: clamp(2rem, 1.25rem + 3.75vw, 4.063rem);
}

@media screen and (max-width: 964px) {
  .vision__vision-content,
  .vision__mission-content,
  .vision__brandpromise-content {
    flex-direction: column;
  }

  .vision__vision-image {
    text-align: center;
  }

  .vision__vision-image img {
    max-width: 100%;
    height: auto;
  }

  .vision__mission-image img,
  .vision__brandpromise-images img {
    width: 100%;
    height: auto;
  }
}