.page__affordable-housing {
  background: $color-body;
  overflow: hidden;

  .intro {
    margin-bottom: 42px;
    text-align: center;
    max-width: 1100px;

    @media #{$screen-md-min} {
      margin-bottom: 5.2rem;
    }

    h1 {
      color: $brand-yellow;
      text-transform: uppercase;
      margin-bottom: 15px;
      font-weight: 800;
      font-size: 42px;
      line-height: 42px;

      @media #{$screen-md-min} {
        margin-bottom: 55px;
        font-weight: 900;
        font-size: 165px;
        line-height: 165px;
      }
    }

    h2 {
      color: $brand-yellow;
      text-transform: uppercase;
      margin-bottom: 23px;

      @media #{$screen-md-min} {
        margin-bottom: 64px;
      }
    }

    p {
      font-size: $font-size-base;
      line-height: $line-height-base;
      max-width: 800px;
      margin: 0 auto;

      @media #{$screen-md-min} {
        font-size: $font-size-mid;
        line-height: $line-height-mid;
      }
    }

    .animated-icon {
      position: relative;
      display: flex;
      width: 125px;
      height: 125px;
      margin: 0 auto 20px;

      @media #{$screen-md-min} {
        position: absolute;
        width: 250px;
        height: 250px;
        top: 338px;
        right: -160px;
        margin-bottom: 0;
      }

      svg {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
      }

      .badge {
        margin: auto;
        width: 100%;
        height: 100%;
      }

      .animation {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        -webkit-transform: translateY(-50%) translateX(-50%);
        margin: auto;

        width: 100%;
        height: 100%;

        @media #{$screen-md-min} {
          width: 100%;
          height: 100%;
          max-width: 100%;
        }
      }
    }
  }

  .affordable {
    overflow: hidden;

    p {
      text-align: center;
      font-weight: 400;
      font-size: 18px;
      line-height: 26px;

      @media #{$screen-md-min} {
        font-size: 24px;
        line-height: 32px;
      }
    }

    .describe-icons-box {
      display: flex;
      margin-top: 20px;
      margin-bottom: 15px;
      justify-content: space-evenly;
      flex-direction: column;
      align-items: center;
      gap: 22px;
      flex: 1 1 33.3%;

      @media #{$screen-md-min} {
        margin-top: 74px;
        gap: 60px;
      }

      .upper-box {
        display: flex;
        width: 100%;
        justify-content: space-around;
        flex-direction: row;
        margin: 0 10px;

        @media #{$screen-md-min} {
          flex-direction: row;
          gap: 60px;
        }

        .describe-icon-box {
          display: flex;
          // gap: 16px;
          flex-direction: column;
          max-width: 30%;
          align-items: center;

          @media #{$screen-md-min} {
            gap: 16px;
            max-width: 400px;
          }

          .describe-icon {
            position: relative;
            height: 110px;

            @media #{$screen-md-min} {
              height: 180px;
            }

            h2 {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translateY(-50%) translateX(-50%);
              -webkit-transform: translateY(-50%) translateX(-50%);
              margin: auto;
            }
          }

          p {
            font-weight: 700;
            font-size: 12px;
            line-height: 18px;

            @media #{$screen-md-min} {
              font-weight: 400;
              font-size: 18px;
              line-height: 26px;
            }
          }

          &:nth-child(1) {
            svg {
              fill: #fff;
              height: 110px;

              @media #{$screen-md-min} {
                height: 180px;
              }
            }

            h2 {
              color: #711bed;
            }
          }

          &:nth-child(2) {
            svg {
              fill: #feff00;
              height: 110px;

              @media #{$screen-md-min} {
                height: 180px;
              }
            }

            h2 {
              color: #711bed;
            }
          }

          &:nth-child(3) {
            svg {
              fill: #e7daff;
              height: 110px;

              @media #{$screen-md-min} {
                height: 180px;
              }
            }

            h2 {
              color: #711bed;
            }
          }
        }
      }

      .lower-box {
        margin: 0 10px;

        .describe-icon-box {
          display: flex;
          gap: 18px;
          flex-direction: column;
          max-width: 400px;
          align-items: center;

          .describe-icon {
            position: relative;

            h2 {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translateY(-50%) translateX(-50%);
              -webkit-transform: translateY(-50%) translateX(-50%);
              margin: auto;
            }
          }

          &:nth-child(1) {
            svg {
              fill: #d9ffa8;
              width: 180px;
              height: 180px;

              @media #{$screen-md-min} {
                width: 300px;
                height: 300px;
              }
            }

            h2 {
              color: #711bed;
            }

            p {
              font-weight: 700;
              font-size: 12px;
              line-height: 18px;
              max-width: 260px;

              @media #{$screen-md-min} {
                font-size: 18px;
                line-height: 26px;
                max-width: 400px;
              }
            }
          }
        }
      }
    }

    .affordable-details {
      font-weight: $font-weight-base;
      font-size: $font-size-mid;
      line-height: 32px;

      .affordable-details-strong {
        max-width: 550px;
        display: block;
        margin: auto;
        font-size: 18px;
        line-height: 26px;

        @media #{$screen-md-min} {
          font-size: 24px;
          line-height: 32px;
        }
      }
    }
  }

  .cta {
    width: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none;

    .btn {
      margin-top: 1rem;
      font-weight: 700;
      font-size: 21px;
      line-height: 32px;
    }
  }
}