.main{background-color:#fff;height:100vh;display:flex;align-items:center;justify-content:center;font-family:Arial,Helvetica,sans-serif;flex-direction:column;overflow:hidden;border-radius:10px}.main .grid{flex:9;width:100%;display:grid;grid-template-columns:auto auto auto;background-color:#fff;padding:10px;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(13,1fr)}.main .grid .tile{font-size:5rem;background-color:#f5f5f5;border-radius:2px;border-color:#c5c5c5;border:.1px solid rgb(195,195,195);transition:all .1s ease-in-out}.main .grid .tile:hover{transform:scale(1.05);border-radius:5px}.main .grid .active{background-color:#d7d7d7;color:#fff}.main .grid .playing{opacity:0;transition:opacity .1s ease-in-out}.main .trailer{flex:1;background-color:#f0f8ff;width:100%;align-items:center;justify-content:center}