/* RentGuarantor CSS: content-our-mission.css (source: src/assets/scss/_content-our-mission.scss) */
/**
 * Content Our Mission Organism
 * Mission statement with two-column text and full-width image
 */
.content-our-mission {
  padding: var(--spacing-1300) 0;
  background-color: var(--surface-general-primary);
}
.content-our-mission__container {
  margin: 0 auto;
  padding: 0 var(--spacing-1200);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1200);
}
.content-our-mission__header {
  width: 547px;
  max-width: 100%;
}
.content-our-mission__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xxl);
  letter-spacing: -1.04px;
  color: var(--text-headings-primary);
  margin-bottom: 0;
}
.content-our-mission__text-layout {
  display: flex;
  gap: 133px;
  align-items: flex-start;
}
.content-our-mission__intro {
  width: 547px;
  flex-shrink: 0;
}
.content-our-mission__intro p {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-m);
  letter-spacing: -0.48px;
  color: rgba(0, 0, 0, 0.8);
  margin-bottom: 0;
}
.content-our-mission__body {
  flex: 1;
}
.content-our-mission__body p {
  font-family: var(--font-family-bodycopy);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
  color: rgba(0, 0, 0, 0.8);
  margin-bottom: 0;
}
.content-our-mission__image {
  width: 100%;
  height: 375px;
  border-radius: 20px;
  overflow: hidden;
}
.content-our-mission__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 1199.98px) {
  .content-our-mission__text-layout {
    gap: 80px;
  }
  .content-our-mission__intro {
    width: 450px;
  }
}
@media (max-width: 991.98px) {
  .content-our-mission {
    padding: var(--spacing-1100) 0;
  }
  .content-our-mission__container {
    padding: 0 var(--spacing-1000);
  }
  .content-our-mission__text-layout {
    flex-direction: column;
    gap: var(--spacing-1000);
  }
  .content-our-mission__intro {
    width: 100%;
  }
  .content-our-mission__intro p {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
  }
  .content-our-mission__heading {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
  }
}
@media (max-width: 767.98px) {
  .content-our-mission__container {
    gap: var(--spacing-1000);
  }
  .content-our-mission__image {
    height: 250px;
  }
  .content-our-mission__heading {
    font-size: var(--font-size-l);
    line-height: var(--line-height-l);
  }
}