// General layout
.media-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
  background-color: $container-bg;
  border-radius: $border-radius;
  box-shadow: $col-box-shadow;

  .contentpane & {
    margin: 0 -20px;
    box-shadow: none;
  }
}

.media-col-main-panel {
  flex: 0 0 $col-main-panel-width;
  max-width: $col-main-panel-width;
}

.media-col-side-panel {
  flex: 0 0 $col-side-panel-width;
  max-width: $col-side-panel-width;
}

[class^="media-col"], [class*=" media-col"] {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: $col-gutter-width * .5;
  padding-left: $col-gutter-width * .5;
}

@media (min-width: 768px) {
  [class^="media-col"], [class*=" media-col"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.media-main {
  position: relative;
  flex: 1 1 600px;
  min-height: 75vh;
}

.media-sidebar {
  flex: 1 1 300px;
  padding: 1rem;
  @media (min-width: 768px) {
    position: sticky;
    top: 75px;
    align-self: flex-start;
    max-width: 300px;
  }
}