open-learning-exchange/planet

@import '../../variables';

:host {

  .profile-container {
    max-width: 900px;
    display: grid;
    grid-template-columns: 1fr .75fr .75fr;
    grid-column-gap: 2rem;
  }

  @media (max-width: $screen-sm) {
    .profile-image-section {
      grid-area: icon;
      text-align: center;
    }

    .profile-list-lt {
      grid-area: list-lt;
    }

    .profile-list-rt {
      grid-area: list-rt;
    }

    .profile-container {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
      'icon icon'
      'list-lt list-rt';
    }

    .profile-image-large {
      width: 50%;
    }
  }

}