/*
 *  About Page
 *    Styles for the About Page, a simple page outlining some info about me.
 *
 *  Dependencies:
 *    styles/settings/responsive.scss
 *    styles/tools/_flex.scss
 *    styles/tools/_responsive.scss
 *
 *  Version:
 *    1.0.0 - 2018/06/06
 */
.p-about-page {
  &__promo {
    padding: 6em 0;
    background-size: 50%;

    &-video {
      background-size: cover;
      background-image: url('./../images/banners/homepage/palms.svg');
    }

    &-platforms {
      //background-image: url('./../images/patterns/game-show.svg');
      background: #FFD6DE;
    }

    &-programming {
      background-image: url('./../images/patterns/third-dimension-squiggle.svg');
    }


    &-admin {
      background-image: url('./../images/patterns/lemon-triangle.svg');
    }

    &-media {

    }
  }

  &__brands {
    @extend %t-flexbox;
    @include t-align-items(center);
    @include t-justify-content(space-between);
    @include t-flex-wrap(wrap);

    &-brand {
      width: 50%;
      padding: 1em;
    }

    &-image {
      display: block;
      margin: 0 auto;
      width: 100%;
      height: 100%;
      max-width: 5em;
      max-height: 5em;
      object-fit: contain;
      object-position: center;
    }

    &-link {
      display: block;
    }

    &-title {
      color: white;
    }
  }

  @include t-media-query($s-xsmall-up) {
    &__brands {
      &-brand {
        width: 25%;
      }
    }
  }

  @include t-media-query($s-small-up) {
    &__brands {
      &-brand {
        padding: 2em;
      }

      &-image {
        max-width: 7em;
        max-height: 6em;
      }
    }
  }

}