body {
  box-sizing: border-box;
  min-height: 100vh;
  padding-top: var(--header-height);
  display: flex;
  flex-direction: column;
}

.layout {
  flex-grow: 1;
  padding: 1.4rem 0;
  position: relative;
  display: flex;
  align-items: center;
}
.layout p,
.layout h1,
.layout h3 {
  margin: 0;
}
.layout h1 {
  font-size: 1.5rem;
  color: var(--title-color);
  font-weight: 500;
}
.layout h3 {
  font-weight: 400;
  font-size: 1rem;
  color: var(--title-color-light);
}
.layout p {
  font-size: 1.15rem;
  color: var(--text-color);
}
.layout-img {
  font-size: 0;
  text-align: center;
}
.layout-img img {
  width: 100%;
}
.layout-data {
  margin: 0 auto;
  margin-top: 1.4rem;
}
.layout .section-title {
  text-align: left;
}
.rect {
  display: none;
}
@media screen and (min-width: 768px) {
  .layout > .container {
    display: flex;
    flex-direction: row;
    gap: 5%;
  }
  .layout-data {
    margin-top: -0.875rem;
    flex: 0 0 55%;
  }
  .layout-content {
    margin-top: 1rem;
  }
  .layout h1 {
    font-size: 2.25rem;
  }
  .layout h3 {
    font-size: 1.3rem;
  }
  .layout p {
    font-size: 1.4rem;
  }
}

@media screen and (min-width: 1400px) {
  .layout .container {
    position: relative;
    z-index: 11;
  }
  .rect {
    display: block;
    position: absolute;
    z-index: 10;
  }
  .rect1 {
    top: 0;
    left: 0;
    width: 126px;
    height: 190px;
    background-image: url(../images/rect5.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
  }
  .rect2 {
    right: 0;
    bottom: 0;
    width: 126px;
    height: 190px;
    background-image: url(../images/rect2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;
  }
  .rect3 {
    z-index: 0;
    left: 0;
    top: 0;
    width: 28%;
    height: 460px;
    background-image: url(../images/rect4.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right bottom;
  }
}

@media screen and (min-width: 1560px) {
  .rect1,
  .rect2 {
    width: 238px;
    height: 268px;
  }
  .rect3 {
    width: 28%;
    height: 650px;
  }
  .layout-data {
    margin-top: -0.5rem;
    flex: 0 0 55%;
  }
  .layout h1 {
    font-size: 3rem;
  }
  .layout h3 {
    font-size: 1.8rem;
  }
  .layout p {
    font-size: 2rem;
  }
}

@media screen and (min-width: 2000px) {
  .rect3 {
    width: 28%;
    height: 820px;
  }
}