/**
 * CSS for Plot Hub Template - Games Tab
 * Date: 2025
 */

/* GAMES */
.plothub-container.games .plothub-games {
    width: 100%;
    padding: 0 2em;
    box-sizing: border-box;
}

.plothub-container.games .plothub-games-list {
    width: 100%;
    padding: 3.5em;
    display: grid;
    grid-template: auto / repeat(2, calc(50% - 1em));
    align-items: center;
    gap: 2em;
    box-sizing: border-box;
}

.plothub-container.games .plothub-game {
    position: relative;
    display: block;
    width: 100%;
    padding-top: calc(375 / 667 * 100%);
    background: transparent 50% 100% / 110% 106% no-repeat;
    border-radius: 20px;
    box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.25);
    transition: all .3s;
}

.plothub-container.games .plothub-game:hover {
    background-size: 115% 110%;
}

.plothub-container.games .plothub-game .plothub-title {
    position: relative;
    bottom: 0;
    display: block;
    width: 100%;
    padding: .5em;
    background: #fff;
    border-radius: 0 0 20px 20px;
    text-align: center;
    font-family: "Cafeteria", 'Arial Bold', sans-serif;
    font-size: 20pt;
    box-sizing: border-box;
}

.plothub-container.games .plothub-game .plothub-notif {
    position: absolute;
    top: min(-5%, -15px);
    right: min(-5%, -15px);
    width: max(15%, 50px);
    padding-top: max(15%, 50px);
    background: transparent center / contain no-repeat;
    border-radius: 50%;
    pointer-events: none;
}

@media screen and (max-width: 700px) {
    .plothub-container.games .plothub-games-list {
        grid-template: auto / auto;
    }
}

@media screen and (max-width: 320px) {
    .plothub-container.games .plothub-game .plothub-title {
        font-size: 18pt;
    }
}

@media screen and (max-width: 300px) {
    .plothub-container.games .plothub-game .plothub-title {
        font-size: 14pt;
    }
}