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;
}

.MockCodeBlock {
  border: 1px solid #363636;
  border-radius: 2px;
  margin: 10px 6px;
  padding: 1px 4px;
  background-color: #2C2C2C;
  font-family: monospace,monospace;
}
.fpbox {
  background-color: #121212;
  margin: 0px 10px 20px 10px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid #363636;
}