Template:TheoryBox/styles.css

/* Theory Box CSS Grid */
.TheoryBoxTitle { grid-area: TheoryBoxTitle; }
.TheoryBoxDifficulty { grid-area: TheoryBoxDifficulty; }
.TheoryBoxContent { grid-area: TheoryBoxContent; }
.TheoryBoxVidArea { grid-area: TheoryBoxVidArea; }

@media screen and (min-width: 900px) {
  .TheoryBoxContainer {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-rows: auto auto;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  
    grid-template-areas:
      "TheoryBoxTitle TheoryBoxDifficulty"
      "TheoryBoxContent TheoryBoxVidArea";
  
    padding: 10px 10px 5px 15px;
    max-width: 1500px;
  }
  .TheoryBoxContent {
    padding-right: 3em;
  }
}
@media screen and (max-width: 899px) {
.TheoryBoxContainer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, auto);
  grid-column-gap: 0px;
  grid-row-gap: 0px;

  grid-template-areas:
    "TheoryBoxTitle TheoryBoxDifficulty"
    "TheoryBoxVidArea TheoryBoxVidArea"
    "TheoryBoxContent TheoryBoxContent";

  padding: 10px;
  max-width: 1500px;
}
}

.TheoryBoxVideo {
  overflow: hidden;
  border-radius: 10px;
  line-height: 0px;
  text-align: center;
}