Template:FrDS HeroVideo/styles.css

/* Hero styles */
.hero {
  display: flex;
  padding: 40px 0px;
  background: #DBF3EC;
}
.hero .wrapper{
  display: flex;
  padding: 0px 20px;
  flex-direction: column;
  gap: 40px;
  max-width: 1060px;
  margin: 0 auto;
}
.hero .wrapper div:first-of-type{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.hero .wrapper div:last-of-type{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}
.player > pre{
  padding: 0;
  border-radius: 20px;
  font-size: 0;
}
.player > pre > span{
  display: block;
}
.mw-tmh-label{
  font-size: 12px !important;
  color: #FFFFFF;
  background-color: rgba(0,0,0,0.8);
}
@media only screen and (min-width:721px) {
  .hero .wrapper{
    flex-direction: row;
    gap: 100px;
    align-items: center;
  }
  .hero .wrapper .player{
    width: 480px;
    flex-shrink: 0;
  }
}