.AnimeHeaderText { color: white; margin: 0.4rem 0 0 0; text-transform: uppercase; font-size: 30px; } .AnimeContainer { margin: 0.2rem 0 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); grid-gap: 0.5rem; } /* .AnimeEntry { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 0.8rem; border-radius: 0.4rem; background-color: #1a1a1a; transition: opacity 200ms ease; } */ .AnimeEntry { position: relative; display: inline-block; overflow: hidden; border-radius: 0.5rem; transition: opacity 200ms ease; } .AnimeContainer:hover .AnimeEntry { opacity: 0.5; } .AnimeContainer:hover .AnimeEntry:hover { opacity: 1; } .AnimeEntry img { display: block; transition: transform 200ms ease; } .AnimeEntry img:hover { transform: translateY(-5px) scale(1.04); } /* .AnimeEntry p { margin: 0.5rem 0 -0.4rem 0; max-width: 170px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: uppercase; } */ .AnimeTitle { position: absolute; bottom: 0; /* Adjust the value as needed */ left: 50%; transform: translateX(-50%); margin: 0; color: white; padding: 5px; text-align: center; background-color: #121212ab; backdrop-filter: blur(10px); text-transform: uppercase; width: 100%; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* .EpisodeText { color: var(--neon-yellow); font-size: small; padding-top: 0.2rem; } */ .AnimeContainer::-webkit-scrollbar { height: 0rem; } @media screen and (max-width: 768px) { .AnimeContainer { display: flex; overflow: auto; align-items: center; } }