/* Theory Box CSS Grid */
.TheoryBoxContainer {
background-color: var(--color-surface-1);
box-shadow: var(--card-shadow-dlw);
padding: 18px;
}
@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";
border-radius: var(--border-radius--medium);
}
.TheoryBoxContent {
padding-right: 1em;
}
}
@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";
border-radius: var(--border-radius--medium);
}
}
.TheoryBoxTitle {
grid-area: TheoryBoxTitle;
border-bottom: 1px solid var(--border-color-base);
}
.TheoryBoxDifficulty {
grid-area: TheoryBoxDifficulty;
text-align: right;
font-size: 1.1em;
line-height: 0.9em;
font-weight: bold;
}
.TheoryBoxContent {
grid-area: TheoryBoxContent;
}
.TheoryBoxVidArea {
grid-area: TheoryBoxVidArea;
text-align: center;
padding-top: 10px;
}
.TheoryBoxVideo {
overflow: hidden;
border-radius: var(--border-radius-medium);
line-height: 0px;
text-align: center;
}