.home { width: 100%; height: 100%; display: grid; grid-template-rows: 200px auto; } /* hot songs */ .hot-songs { margin-top 10px; width: 100%; height: 200px; position: relative; border-bottom: solid 1px #10101011; } .hot-title { top: 50%; position: absolute; transform: translate(10px, -50%); } .switch-left, .switch-right { position: absolute; display: flex; align-items: center; top: 100px; width: 30px; height: 30px; } .switch-left { left: 18%; transform: translate(-100%, -50%); } .switch-right { right: 18%; transform: translate(100%, -50%); } .hot-songs-container { position: relative; width: 60%; height: 100%; margin: 0 auto; overflow: hidden; display: flex; align-items: center; } .hot-songs-list { display: flex; max-height: 150px; position: absolute; } .hotsong-item { display: inline-block; height: 150px; aspect-ratio: 1; margin: 0 10px; position: relative; } .hotsong-item > img { width: 100%; height: 100%; } .hots-overlay, .randoms-overlay { position: absolute; width: 100%; height: 100%; top: 0%; left: 0%; } .hots-overlay > a { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .randoms-overlay > a { display: none; position: absolute; bottom: 0%; left: 0%; } .hots-overlay:hover, .randoms-overlay:hover { background-color: #10101040; } /* random songs */ .random-songs { width: 100%; display: flex; overflow: auto; } .random-title, .random-refresh { width: 100px; display: flex; align-items: center; justify-content: center; } .randoms-container { flex: 1; padding: 10px; display: flex; flex-wrap: wrap; width: 100%; align-items: center; justify-content: center; } .randoms-item { width: 17%; min-width: 150px; aspect-ratio: 1; position: relative; margin: 5px; } .randoms-item > img { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; } .randoms-title { display: none; position: absolute; left: 0%; top: 0%; color: white; width: 100%; text-align: center; } .random-refresh { display: flex; justify-content: start; }