:root{
 --headerHeight: 3rem;
}

.header__logo-image{
 width: 40px;
 height: 40px;
}
.header__logo-text{
 font-size: 2.5rem;
}
.nav__item{
 padding: .4rem;
 border: 1px solid transparent;
}
.nav__item:hover{
 border-color: #666;
}
.nav__header, .nav__closeMenu{
 display: none;
}

.languages{
 position: absolute;
 top: 2.5rem;
 left: -.2rem;
 margin-top: 0;
 background: inherit;
}
.language__item{
 padding: .8rem;
}

.courseDataSection{
 flex-direction: row;
 flex-wrap: nowrap;
}
.courseDataSection .container{
 width: 40%;
 min-width: 480px;
 max-width: 683px;
}
.courseModules{
 padding: 0 .4rem;
 border-left: 1px solid #222;
 flex-grow: 1;
}
.courseModules__module{
 border: #111 1px solid;
}
.courseModules__module-image{
 display: block;
} 

.moduleDataSection{
 flex-direction: row;
 flex-wrap: nowrap;
}
.moduleDataSection .container{
 flex-grow: 1;
}
.moduleContentList{
 padding: 0 .4rem;
 width: 30%;
 min-width: 300px;
 max-width: 360px;
 border-left: 1px solid #222;
}

.main{
 /* header +footer +foorerMargin */
 height: calc(100vh - 130px);
 overflow-y: scroll;
}
.footer{
 height: 82px;
}

@media screen and (min-width: 960px) {
 .welcomeBanner__preContainer .container{
  font-size: 6rem;
 }
 .container-sectionCards{
  grid-template-columns: 1fr 1fr;
 }
 .container-video {
  max-width: 683px;
  padding-bottom: 384px; /* =.container-video max-width *(16/9) */
 }
}
@media screen and (min-width: 1064px) {
 .welcomeBanner__preContainer .container{
  font-size: 6.5rem;
 }
}
@media screen and (min-width: 1200px) {
 .welcomeBanner__preContainer .container{
  font-size: 7.5rem;
 }
}
@media screen and (min-width: 1280px) {
 .container-sectionCards{
  grid-template-columns: 1fr 1fr 1fr 1fr;
 }
 .courseCard{
  width: 412px;
  flex-grow: 0;
 }
}