@import '../styles/colors.scss';
@import '../styles/sizes.scss';

.container {
  display: grid;

  @media only screen and (max-width: 767px) {
    gap: 20px;
    grid-auto-flow: column;
    grid-auto-columns: 100%;

    overflow-x: auto;
    overscroll-behavior-inline: contain;

    scroll-snap-type: inline mandatory;

    > * {
      scroll-snap-align: start;
    }
  }

  @media only screen and (min-width: 768px) {
    grid-template-columns: 0.75fr 1.5fr 0.75fr;
    gap: 30px;
  }
}

.sidesWrap {
  position: relative;

  // HACK: Stop grid column from growing
  min-width: 0;
}

.sides {
  @media only screen and (min-width: 768px) {
    position: sticky;
    top: $header-height + $body-vertical-padding;
  }
}

.files {
  display: flex;
  flex-direction: column;
  grid-gap: 15px;
}
.content {
  padding: 10px;
  border: 10px solid $overlay-background-color;
  border-radius: 4px;

  @media only screen and (max-width: 767px) {
    max-height: calc(100svh - $header-height + $body-vertical-padding * 2);
    overflow-y: auto;
  }
}