.moc-master-page .moc-master-steam-section { display: flex; flex-direction: row; justify-content: center; align-content: center; gap: 10px; }
.moc-master-page .moc-master-steam-section > div { width: 45%; height: 100%; }
.moc-master-page .moc-master-steam-section > div:first-child:hover, .moc-master-page .moc-master-steam-section > div:last-child iframe:hover { scale: 1.1; }
.moc-master-page .moc-master-steam-section img { width: 100%; height: 100%; }
/* El widget de Steam trae `width="646"` en el marcado. En movil se salia de su hueco (334 px) y quedaba cortado
   por la mitad, sin forma de llegar al resto. Se le pone tope: el propio widget recoloca su contenido al encoger,
   y necesita algo mas de alto para que no le salgan sus propias barras de desplazamiento. */
.moc-master-page .moc-master-steam-section iframe { max-width: 100%; }
@media (max-width: 767px) { .moc-master-page .moc-master-steam-section iframe { width: 100%; height: 260px; } }
.moc-master-feature-slider { height: 600px; }
.moc-master-feature-image { width: 100%; height: 100%; object-fit: cover; }
.moc-master-feature-overlay { opacity: .4; }
@media (max-width: 767px) { .moc-master-page .moc-master-steam-section { flex-direction: column; } .moc-master-page .moc-master-steam-section > div { width: 100%; } }