@value color-light-grey from '../colours.module.css';

.topSection {
  background: black;
}

.playerSection {
  display: inline-flex;
  align-items: flex-start;
  width: 100%;
}

video {
  width: 30%;
  max-height: 160px;
  cursor: pointer;
}

.controlsSection {
  width: 64%;
  display: flex;
  flex-direction: column;
}

.titleBox {
  border-bottom: 0.02em solid color-light-grey;
  margin-bottom: 1em;
}

.title {
  margin: 1em;
  color: white;
  height: 1.3em;
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.helpText {
  margin-top: 0px;
  margin-bottom: 0.1em;
}

/* Mobile devices */
@media (max-width: 768px) {
  .hideInMobile {
    display: none;
  }

  video {
    /* min-width: 50%; */
  }
}