@import '@/styles/variables';
@import '@/styles/font-styles';

.biography {
  background-color: $gray-004;
  min-height: 100vh;
  padding-bottom: 104px;

  .line-container {
    margin: 40px 0!important;

    @include mobile {
      .column {
        padding: 0;
      }
    }
  }

  .main-image {
    position: relative;

    .fake-image {
      height: 500px;
      width: 100%;

      @include mobile {
        height: 300px;
        width: 100%; 
      }
    }
  }

  .title {
    position: absolute;
    left: 140px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 490px;
    width: 100%;

    @include mobile {
      position: static;
      top: auto;
      transform: translateY(0);
      max-width: 100%;
      padding: 0 12px;
      margin-top: -45px;
    }
  }

  .biography-paragraph-container {
    padding-top: 40px;

    .main-paragraph-title {
      color: $gray-002;
    }

    .main-paragraph-content {
      h1, p {
        color: $white;
      }

      @include tablet-only {
        margin-bottom: 15px;

        &:last-child {
          margin-bottom: 0;
        }
      }

      @include mobile {
        margin-bottom: 20px;
      }
    }

    & > .columns > .column {
      padding: 0;
    }
  }

  .line {
    height: 1px;
    background-color: $line;
    width: 100%;
  }

  .resume-container {
    padding: 0 0 40px; 
  }

  .resume-title {
    @extend .subtitle;

    color: $gray-002;

    @include mobile {
      margin-bottom: 10px;
    }
  }

  .resume-list {
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    li {
      @extend .body-regular;
      color: $white;

      b {
        @extend .body-bold;
      }
    }
  }

  @include mobile {
    padding-bottom: 50px;
  }
}