open-learning-exchange/planet

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

:host {

  iframe {
    border: none;
    width: 100%;
    height: 60vh;
  }

  .view-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "detail view";
    grid-column-gap: 1rem;
  }

  .full-view-container.view-container {
    grid-template-columns: 0 1fr;
    grid-column-gap: 0;
  }

  .resource-detail {
    grid-area: detail;
    padding: 1rem;
    overflow-y: auto;
  }

  .resource-view {
    grid-area: view;

    * {
      max-width: 100%;
      max-height: 60vh;
    }
  }

  @media (max-width: $screen-sm) {
    .view-container {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-template-areas: 
      'view'
      'detail';
    }
    
    .full-view-container.view-container {
      grid-template-columns: 1fr;
      grid-template-rows: 0 1fr;
    } 

    .resource-detail{
      margin-top: 1rem;
      overflow-y: visible;
    }
  }
}