.exterior-concept {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: var(--size-space-1600) var(--size-space-800);
  background-color: var(--basewhite);
  box-sizing: border-box;
}

.exterior-concept__inner {
  display: flex;
  position: relative;
  width: 100%;
  max-width: 1000px;
  align-items: center;
  justify-content: center;
  gap: var(--size-space-1200);
}

.exterior-concept__content {
  display: flex;
  position: relative;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-1200);
}

.exterior-concept__label {
  display: flex;
  position: relative;
  align-items: center;
  align-self: stretch;
  margin: -1px 0 0;
  color: var(--themasecondary-400);
  font-family: "Wendy One", Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 24px;
}

.exterior-concept__heading {
  position: relative;
  align-self: stretch;
  margin: 0;
  color: transparent;
  font-family: var(--h-2-font-family);
  font-size: var(--h-2-font-size);
  font-style: var(--h-2-font-style);
  font-weight: var(--h-2-font-weight);
  letter-spacing: var(--h-2-letter-spacing);
  line-height: var(--h-2-line-height);
}

.exterior-concept__heading-normal,
.exterior-concept__heading-accent {
  font-family: var(--h-2-font-family);
  font-size: var(--h-2-font-size);
  font-style: var(--h-2-font-style);
  font-weight: var(--h-2-font-weight);
  letter-spacing: var(--h-2-letter-spacing);
  line-height: var(--h-2-line-height);
}

.exterior-concept__heading-normal {
  color: #333333;
}

.exterior-concept__heading-accent {
  color: var(--themaprimary-700);
}

.exterior-concept__body {
  position: relative;
  align-self: stretch;
  margin: 0;
  color: var(--baseblack);
  font-family: var(--body-1-font-family);
  font-size: var(--body-1-font-size);
  font-style: var(--body-1-font-style);
  font-weight: var(--body-1-font-weight);
  letter-spacing: var(--body-1-letter-spacing);
  line-height: var(--body-1-line-height);
}

.exterior-concept__image-stack {
  position: relative;
  width: 450px;
  height: 600px;
  flex-shrink: 0;
  overflow: hidden;
}

.exterior-concept__image-top {
  position: absolute;
  top: 0;
  left: calc(50% - 80px);
  width: 305px;
  height: 38.17%;
  overflow: hidden;
  object-fit: cover;
}

.exterior-concept__image-main {
  position: absolute;
  top: 25%;
  left: 0;
  width: 77.78%;
  height: 66.67%;
  object-fit: cover;
}

.exterior-concept__image-bottom,
.exterior-concept__pattern {
  position: absolute;
  top: 75%;
  left: 66.67%;
  width: 33.33%;
  height: 25%;
}

.exterior-concept__image-bottom {
  object-fit: cover;
}

.exterior-concept__pattern {
  background: repeating-linear-gradient(
    135deg,
    var(--themasecondary-700) 0,
    var(--themasecondary-700) 6px,
    transparent 6px,
    transparent 14px
  );
  mix-blend-mode: multiply;
}

@media (max-width: 1024px) {
  .exterior-concept__inner {
    gap: var(--size-space-800);
  }

  .exterior-concept__image-stack {
    width: 380px;
    height: 507px;
  }
}

@media (max-width: 768px) {
  .exterior-concept {
    padding: var(--size-space-1200) var(--size-space-600);
  }

  .exterior-concept__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--size-space-800);
  }

  .exterior-concept__content {
    width: 100%;
    gap: var(--size-space-800);
  }

  .exterior-concept__heading,
  .exterior-concept__heading-normal,
  .exterior-concept__heading-accent {
    font-size: 44px;
    letter-spacing: 2.2px;
    line-height: 1.6;
  }

  .exterior-concept__body {
    font-size: var(--body-1-font-size);
    line-height: var(--body-1-line-height);
  }

  .exterior-concept__image-stack {
    width: 100%;
    max-width: 450px;
    height: auto;
    aspect-ratio: 450 / 600;
    flex-shrink: 0;
  }

  .exterior-concept__image-top {
    left: 37.43%;
    width: 62.57%;
    height: 35.31%;
  }
}

@media (max-width: 430px) {
  .exterior-concept__inner {
    max-width: 342px;
  }
}

@media (max-width: 375px) {
  .exterior-concept {
    padding-right: var(--size-space-400);
    padding-left: var(--size-space-400);
  }

  .exterior-concept__inner {
    max-width: 342px;
  }
}