.related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
}

.card{
  display:block;
  background:#032029;
  padding:16px;
  border-radius:10px;
  text-decoration:none;
  color:#eaf6f9;
  
}

.player-page {
    max-width: 1100px; /*1100px;*/
    margin: 0 auto;
    padding: 20px;
}

.player-container {
    max-width: 1100px; /*1100px;*/
	height:100%;
    /* Aspect ratio 4:3 es el estándar de animaciones Flash antiguas */
    aspect-ratio: 4 / 3; 
    margin: 10px 10px auto 10px;
    background: #000;
    border-radius: 12px;
    border: 2px solid #00d1ff; /* Un borde cyan para que combine */
    overflow: hidden;
    position: relative;
	padding:0px;
}
/*Reproductor para cuando NO ES MOVIL*/
	@media (min-width:769px){
		.player-container {
			width: 90%;
			height: 90%;
			bottom: 0;
		}
	}
	
/*Reproductor para cuando SI ES MOVIL*/
	@media (max-width:768px){
		.player-container {
			width: 100%;
		}
	}
	
#player {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	
	padding:0px;
	margin:0px;
}

/* Ruffle debe ocupar el 100% sin paddings */
ruffle-player {
    width: 100%;
    height: 100%;
    display: block;
}