.page__100things {
  background-color: $color-blue-dark;
  position: relative;
  text-align: center;
  overflow: hidden;

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

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

  p {
    margin: 0;
  }

  .image-badge {
    position: relative;
    width: 125px;
    margin: 0 auto 30px;

    @media #{$screen-md-min} {
      width: 250px;
      position: absolute;
      top: 175px;
      right: -286px;
      z-index: 0;
      margin: 0;
    }
  }

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

      @media #{$screen-md-min} {
        position: absolute;
        width: 250px;
        height: 250px;
        top: 175px;
        right: -286px;
        z-index: 1;
        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%;
        }
      }
    }
  }

  .icons-list {
    margin-top: 40px;
    padding-bottom: 29px;
    display: flex;
    -moz-column-gap: 20px;
    column-gap: 20px;
    row-gap: 24px;
    flex-wrap: wrap;
    justify-content: space-evenly;

    @media #{$screen-md-min} {
      margin-top: 66px;
      -moz-column-gap: 40px;
      column-gap: 40px;
      row-gap: 50px;
    }

    .animated-icon-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1 1 calc(33% - 20px);
      width: calc(33% - 20px);

      @media #{$screen-md-min} {
        min-height: 300px;
        flex: 1 1 calc(16% - 40px);
        max-width: 185px;
      }

      .animated-icon {
        position: relative;
        display: flex;
        width: 100%;
        max-width: 180px;
        height: auto;

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

        svg {
          width: 100%;
          height: auto;
          min-height: 110px;
        }

        .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: 80%;
        }
      }

      p {
        text-align: center;
        margin-top: 10px;
        white-space: pre-wrap;
        font-weight: 700;
        font-size: 10.8px;
        line-height: 16.2px;
        text-transform: capitalize;

        @media #{$screen-md-min} {
          margin-top: 20px;
          font-weight: 400;
          font-size: $font-size-base;
          line-height: $line-height-base;
        }
      }

      .btn__learn-more {
        width: 110px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 12px;

        font-weight: 700;
        font-size: 10.8px;
        line-height: 16.2px;

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

          font-size: 14.4px;
          line-height: 21.6px;
        }
      }
    }
  }

  .page__about__history-badge {
    position: absolute;
    bottom: -18px;
    right: 30px;
    display: none;
    max-width: 250px;
    z-index: 1;

    @media #{$screen-sm-min} {
      width: 17.36%;
      display: block;
    }
  }

  .page__100things__faq {
    background: $color-blue;
    padding: 2.5rem 0 1rem 0;
    margin: 0 0 2.5rem 0;
    position: relative;

    @media #{$screen-sm-min} {
      margin: 0 0 10.5rem 0;
      padding: 5rem 0;
    }

    .wrap--flex {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      div {
        &:first-child {
          flex: 0 0 100%;

          @media #{$screen-md-min} {
            flex: 0 0 38%;
          }
        }

        &:last-child {
          flex: 0 0 100%;

          @media #{$screen-md-min} {
            margin-right: 95px;
            flex: 0 0 43%;
          }
        }
      }

      strong {
        color: $brand-yellow;
      }

      p {
        &:last-child {
          @media #{$screen-md-min} {
            margin: 0;
          }
        }
      }
    }

    .page__about__faq-badge {
      position: absolute;
      bottom: -125px;
      left: 30px;
      display: none;
      max-width: 250px;

      @media #{$screen-sm-min} {
        width: 17.36%;
        display: block;
      }
    }
  }

  .page__100things__timeline {
    position: relative;

    .timeline-item {
      display: flex;
      flex-wrap: wrap;
      margin: 0 0 5rem;
      background-color: $color-blue-light;

      @media #{$screen-md-min} {
        // margin: 0 5.625rem 5rem;
      }

      &:nth-child(even) {
        aside {
          @media #{$screen-md-min} {
            order: 2;
          }
        }

        figure {
          @media #{$screen-md-min} {
            order: 1;
          }
        }
      }

      &.no-image {
        background-color: transparent;
        margin: 0 0 2.938rem 0;

        aside {
          flex: 0 0 100%;

          div {
            max-width: 100%;

            .year {
              margin: 0 0 1.063rem 0;
              color: $brand-yellow;
            }

            .description {
              color: $color-white;
              font-weight: bold;
              font-size: $font-size-large;
              line-height: $line-height-large;
            }
          }
        }
      }

      aside {
        order: 2;
        flex: 0 0 100%;
        display: flex;
        justify-content: center;
        margin: 0 0 3rem 0;

        @media #{$screen-md-min} {
          margin: 0;
          order: 1;
          flex: 0 0 50%;
          align-items: center;
        }

        div {
          text-align: center;
          max-width: 400px;
        }

        .year {
          display: block;
          font-weight: bold;
          font-size: $font-size-large;
          line-height: $line-height-large;
          margin: 0 0 1.5rem 0;
          color: $color-blue-dark;
        }

        .description {
          margin: 0;
          color: $color-blue-dark;
          font-size: $font-size-mid;
          line-height: $line-height-mid;
        }
      }

      figure {
        order: 1;
        flex: 0 0 100%;
        margin: 0 0 3rem 0;

        @media #{$screen-md-min} {
          margin: 0;
          order: 2;
          flex: 0 0 50%;
        }

        img {
          width: 100%;
        }
      }
    }

    .page__about__timeline-badge {
      &:nth-of-type(1) {
        position: absolute;
        top: 720px;
        right: 30px;
        display: none;
        max-width: 250px;

        @media #{$screen-sm-min} {
          width: 17.36%;
          display: block;
        }
      }

      &:nth-of-type(2) {
        position: absolute;
        top: 2200px;
        left: 60px;
        display: none;
        max-width: 250px;

        @media #{$screen-sm-min} {
          width: 17.36%;
          display: block;
        }
      }

      &:nth-of-type(3) {
        position: absolute;
        top: 3326px;
        right: 30px;
        display: none;
        max-width: 250px;

        @media #{$screen-sm-min} {
          width: 17.36%;
          display: block;
        }
      }

      &:nth-of-type(4) {
        position: absolute;
        bottom: 950px;
        left: 30px;
        display: none;
        max-width: 250px;

        @media #{$screen-sm-min} {
          width: 17.36%;
          display: block;
        }
      }
    }
  }
}