.tienvoud-mission-vision {
  --mission-pink: #ff1fa9;
  --mission-ink: #1a1a1a;
  position: relative;
  box-sizing: border-box;
  padding: clamp(64px, 8vw, 112px) max(32px, calc((100vw - 1240px) / 2));
  overflow: hidden;
  border-top: 1px solid #eeeeee;
  background: #ffffff;
  color: var(--mission-ink);
}

.tienvoud-mission-vision::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 31, 169, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 31, 169, .085) 1px, transparent 1px);
  background-size: 48px 48px;
  background-size: var(--panel-grid-size, 48px) var(--panel-grid-size, 48px);
  background-position: var(--panel-grid-x, 0px) var(--panel-grid-y, 0px);
  -webkit-mask-image: linear-gradient(135deg, rgba(0, 0, 0, .72), transparent 58%);
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, .72), transparent 58%);
}

.mission-vision-intro,
.mission-vision-grid,
.mission-vision-principle {
  position: relative;
  z-index: 1;
}

.mission-vision-intro {
  display: grid;
  max-width: 950px;
  gap: 18px;
  margin-bottom: clamp(40px, 5vw, 68px);
}

.mission-vision-kicker {
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.mission-vision-kicker {
  width: fit-content;
  padding: 7px 10px 6px;
  border: 2px solid var(--mission-ink);
  background: var(--mission-pink);
  box-shadow: 4px 4px 0 var(--mission-ink);
}

.tienvoud-mission-vision h2 {
  max-width: 900px;
  margin: 0;
  font-family: "Carter One", cursive;
  font-size: 36px;
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.tienvoud-mission-vision h2 span { color: var(--mission-pink); }

.mission-vision-intro > p:last-child {
  max-width: 790px;
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 650;
  line-height: 1.5;
}

.mission-vision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.mission-vision-card {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  padding: clamp(30px, 4vw, 52px);
  border: 3px solid var(--mission-ink);
  background: #ffffff;
  box-shadow: 9px 9px 0 var(--mission-pink);
}

.mission-vision-card-vision {
  background: var(--mission-ink);
  color: #ffffff;
  box-shadow: 9px 9px 0 rgba(255, 31, 169, .5);
}

.mission-vision-label {
  margin-top: 0;
  margin-bottom: 22px;
  color: var(--mission-pink);
  font-family: "Nunito", sans-serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.mission-vision-card h3 {
  max-width: 520px;
  margin: 0 0 24px;
  font-family: "Carter One", cursive;
  font-size: clamp(29px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.08;
  text-wrap: balance;
}

.mission-vision-card > p:not([class]) {
  max-width: 570px;
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.58;
}

.mission-vision-card > p:not([class]) + p { margin-top: 16px; }

.mission-vision-principle {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 28px;
  margin-top: clamp(34px, 4.5vw, 58px);
  padding: clamp(24px, 3vw, 36px);
  background: #f7f7f7;
}

.mission-vision-principle strong {
  font-family: "Carter One", cursive;
  font-size: clamp(23px, 2.7vw, 34px);
  font-weight: 400;
  line-height: 1.12;
}

.mission-vision-principle p {
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.55;
}

@media (max-width: 760px) {
  .tienvoud-mission-vision {
    padding: 56px 16px 72px;
  }

  .tienvoud-mission-vision::before { background-size: var(--panel-grid-size, 32px) var(--panel-grid-size, 32px); }

  .mission-vision-intro { margin-bottom: 36px; }

  .tienvoud-mission-vision h2 { font-size: clamp(27px, 8vw, 34px); }

  .mission-vision-grid { grid-template-columns: 1fr; }

  .mission-vision-card {
    padding: 30px 24px 32px;
    box-shadow: 6px 6px 0 var(--mission-pink);
  }

  .mission-vision-card-vision { box-shadow: 6px 6px 0 rgba(255, 31, 169, .5); }

  .mission-vision-principle {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 36px;
    padding: 24px 22px;
  }
}