.header-hero {
  padding-top: 12em;
  padding-bottom: 21em;

  &--tentang {
    background-color: $color-light-green;
    background-image: url(../images/tentang-hero-bg.png);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
  }

  &__page-title {
    color: $color-white;
    white-space: normal;
    word-break: break-all;
  }

  &__page-caption {
    font-family: 'Helvetica-Bold', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    color: $color-white;
    line-height: 1.2;
  }
}

// Deskripsi Dakota
.tentang-story {
  background-color: $color-light-green;

  &__description {
    padding-right: 2em;

    p {
      font-family: 'Helvetica-Regular', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
      font-size: 1rem;
      line-height: 1.3;
      margin-bottom: 1em;
      color: $color-white;
    }
  }

  &__image-list {
    position: relative;
    top: -100px;

    img {
      width: auto;
      max-width: 100%;
      height: auto;
      display: block;
    }
  }
}

// Bagaimana Dakota Bekerja
.tentang-bekerja {
  background: linear-gradient(180deg, $color-light-green 60%, $color-soft-white 60%);
  
  &__curved-bg{
    padding-top: 12.5em;
    padding-bottom: 18.5em;
    background-color: transparent;
    background-image: url(../images/tentang-bekerja-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }

  &__section-title {
    margin-top: 2em;
    margin-bottom: 3em;
  }

  &__image-box {
    text-align: center;
    margin-bottom: 1.5em;
    position: relative;
    padding-left: 2em;
    padding-right: 2em;
  }

  &__image-box-source {
    margin-bottom: 1em;
  }

  &__image-box-title {
    font-family: 'Qanelas-Bold', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    font-size: 1.2rem;
    line-height: 1.2;
    color: $color-soft-black;
    margin-bottom: .25em;
  }

  &__image-box-description {
    font-family: 'Helvetica-Light', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    font-size: 1.125rem;
    line-height: 1.1;
    color: $color-soft-black;
  }

  &__image-box-nav {
    position: absolute;
    top: 40px;
    right: -70px;
    width: 50%;
    height: auto;
  }
}

// Dakota Memberikan Layanan
.tentang-explain {
  padding-top: 2em;
  padding-bottom: 4em;
  text-align: center;
  background-color: $color-soft-white;
  
  p {
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 3em;
    color: $color-dark-green;
  }

  &__button {
    padding: 1.5em 1.8em;
  }
}

// Berita Terbaru
.tentang-berita {
  &__image-box-data {
    h4 {
      font-size: 1.2rem;
    }
    
    p{
      font-size: .95rem;
      margin-bottom: 1em;
    }

    .btn {
      margin-right: auto;
      margin-left: 0;
      background-color: $color-light-yellow;
      
      &:hover {
        background-color: darken($color-light-yellow, 10%);
      }
    }
  }

  &__image-box-data-inner {
    top: -40px;
  }
}

/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
// Desktop (1200px) RESPONSIVE NESS ---------------------
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
@include media-query(md) {

  // Dakota Bekerja ----------------------------
  .tentang-bekerja {
    &__image-box-nav {
      right: -56px;
    }
  }
  
  // Berita Terbaru ----------------------------
  .tentang-berita {
    &__image-box-data {
      padding-left: 1em;
      padding-right: 1em;
    }
  }

}

/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
// Tablet (992px) RESPONSIVE NESS ---------------------
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
@include media-query(md-2) {

  // Dakota Bekerja ----------------------------
  .tentang-bekerja {
    &__image {
      flex-wrap: wrap;
    }
    &__image-box {
      flex-basis: 50%;
    }
    &__image-box-nav {
      display: none;
    }
  }

}

/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
// Mobile (768px) RESPONSIVE NESS ---------------------
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////

@include media-query(md) {

  // Deskripsi ----------------------------
  .tentang-story {
    &__image-list {
      top: auto;
    }
  }

}

@include media-query(sm) {

  // Dakota Bekerja ----------------------------
  .tentang-bekerja {
    &__image-box {
      flex-basis: 100%;
    }
  }

}