.resume {
  padding: 1rem;
  font-size: 1rem;

  @include flexbox();
  @include flex-direction(column);
  @media only screen and (max-width: 769px) {
    padding: 0;
  }

  &__header {
    &--image {
      padding: 0 1rem;
    }

    &--name {
      font-family: $title-font;
      font-size: 1.75rem;
      font-weight: 900;
    }

    &--info {
      
    }
  }

  &__section {
    @include flexbox();
    
    @media only screen and (max-width: 769px) {
      @include flex-direction(column);
    }

    @include themify($themes) {
      &--sectiontitle {
        font-family: $title-font;
        padding: 0 1rem;
        font-size: 1.25rem;
        color: themed('gtt-color');
      }

      &--title {
        font-family: $title-font;
        font-size: 1.125rem;
        color: themed('meta-color');

        @include flexbox();
        @include align-items(center);
        @media only screen and (max-width: 769px) {
          @include flex-direction(column);
          @include align-items(flex-start);
        }
      }

      &--meta {
        font-size: 0.9rem;
      }

      &--subtitle {
        
      }

      &--contents {
        ol, ul {
          margin-left: 2.5rem;
        }
        li {
          margin: 0;
        }
      }
    }

    &[data-dir='rtl'] {
      .resume__section--side {
        word-wrap: break-word;
        width: 30%;
        padding: 0.75rem;
        display: block;
        text-align: left;

        @media only screen and (max-width: 769px) {
          text-align: right;
          width: 100%;
          padding: 0.75rem 0;
        }
      }

      .resume__section--main {
        word-wrap: break-word;
        width: 70%;
        padding: 0.75rem;
        display: block;
        text-align: right;

        @include flexbox();
        @include flex-direction(column);
        @media only screen and (max-width: 769px) {
          width: 100%;
        }
      }
    }

    &[data-dir="ltr"] {
      .resume__section--side {
        word-wrap: break-word;
        width: 30%;
        padding: 0.75rem;
        display: block;
        text-align: right;

        @media only screen and (max-width: 769px) {
          text-align: left;
          width: 100%;
          padding: 0.75rem 0;
        }
      }

      .resume__section--main {
        word-wrap: break-word;
        width: 70%;
        padding: 0.75rem;
        display: block;
        text-align: left;

        @include flexbox();
        @include flex-direction(column);
        @media only screen and (max-width: 769px) {
          width: 100%;
        }
      }
    }
  }
}