:root {
  --header-height: 6.7rem;
}
@media (width > 768px) {
  :root {
    --header-height: 11.2rem;
  }
}

.green-building-commitment {
  position: relative;
  background: var(--grey-bg);
}
.green-building-commitment__content {
  display: flex;
  flex-direction: column;
}
.green-building-commitment .content-container {
  position: relative;
  padding: 7.9rem 0rem 12.6rem;
  display: flex;
  flex-direction: column;
}
@media (width > 768px) {
  .green-building-commitment .content-container {
    flex-direction: row;
    padding: 7.8rem 3.3rem 11rem;
  }
}
.green-building-commitment .content-container .text-content .commitment-header {
  color: var(--red-main);
  text-align: right;
  font-size: 3rem;
  font-weight: 900;
  line-height: 110%;
  padding-bottom: 1.2rem;
  max-width: 30.3rem;
}
@media (width > 768px) {
  .green-building-commitment .content-container .text-content .commitment-header {
    font-size: 3.5rem;
    padding-bottom: 1.6rem;
    max-width: 39.6rem;
  }
}
.green-building-commitment .content-container .text-content .description-container .commitment-description {
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 130%;
  color: var(--black-main);
  max-width: 30.3rem;
}
@media (width > 768px) {
  .green-building-commitment .content-container .text-content .description-container .commitment-description {
    font-size: 1.8rem;
    max-width: 38.9rem;
  }
}
.green-building-commitment .content-container .text-content .description-container .commitment-sub-description {
  font-size: 1.2rem;
  line-height: 130%;
  color: var(--black-main);
  padding-top: 3.9rem;
  text-transform: uppercase;
  font-weight: 400;
  padding-bottom: 1.5rem;
}
@media (width > 768px) {
  .green-building-commitment .content-container .text-content .description-container .commitment-sub-description {
    padding-top: 0.6rem;
    padding-bottom: 17.7rem;
  }
}
.green-building-commitment .image-content {
  padding-block: 0;
  width: 100vw;
  margin-left: -3.6rem;
  margin-right: -3.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  padding: 5.4rem 0;
  border-top: 1px solid var(--red-30);
  border-bottom: 1px solid var(--red-30);
  width: calc(100% + 2 * var(--container-padding));
}
@media (width > 768px) {
  .green-building-commitment .image-content {
    margin-left: 10rem;
    justify-content: flex-end;
    border-top: none;
    border-bottom: none;
    padding: 0;
  }
}
.green-building-commitment .image-content .commitment-image {
  width: 10.5389rem;
  height: 18rem;
  aspect-ratio: 105.39/180;
  display: flex;
}
@media (width > 768px) {
  .green-building-commitment .image-content .commitment-image {
    width: 19rem;
    height: 32.4rem;
    flex-shrink: 0;
    aspect-ratio: 95/162;
  }
}

.grid-line {
  position: absolute;
  background-color: var(--red-10);
}
.grid-line.left {
  top: 0;
  bottom: 0;
  width: 1px;
  height: 100%;
}
.grid-line.right {
  top: 0;
  bottom: 0;
  width: 1px;
  height: 100%;
}

.border.bottom {
  background: var(--grey-line);
}