.pantheon-page {
    width: 100%;
    box-sizing: border-box;
    padding: 40px 0 60px;
}

.pantheon-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.pantheon-entry {
    position: relative;
    overflow: hidden;
    min-height: 180px;
    box-sizing: border-box;
    text-align: center;
    background: var(--base-color);
}

.pantheon-content {
    position: relative;
    z-index: 2;
    padding: 30px;
}

.pantheon-heading {
    height: 33px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 30px;
    text-transform: lowercase !important;
    letter-spacing: 0.1em;
    margin: 0 auto;
    padding-bottom: 10px;
    color: var(--muted-tone);
}

.pantheon-domains {
    display: block;
    position: relative;
    z-index: 2;
    color: var(--muted-tone);
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
}

.pantheon-status {
    margin-top: 25px;
    font-weight: bold;
    letter-spacing: 0.2em;
}

.pantheon-player {
    margin-top: 8px;
}

.pantheon-canon {
    margin-top: 8px;
}

.pantheon-statue {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.pantheon-statue {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.12;
    height: 170px;
}

.pantheon-zeus .pantheon-statue {
    background-image: url(/images/pantheon/zeus.png);
}

.pantheon-hera .pantheon-statue {
    background-image: url(/images/pantheon/hera.png);
}

.pantheon-poseidon .pantheon-statue {
    background-image: url(/images/pantheon/poseidon.png);
}

.pantheon-demeter .pantheon-statue {
    background-image: url(/images/pantheon/demeter.png);
}

.pantheon-athene .pantheon-statue {
    background-image: url(/images/pantheon/athene.png);
}

.pantheon-apollon .pantheon-statue {
    background-image: url(/images/pantheon/apollon.png);
}

.pantheon-artemis .pantheon-statue {
    background-image: url(/images/pantheon/artemis.png);
}

.pantheon-ares .pantheon-statue {
    background-image: url(/images/pantheon/ares.png);
}

.pantheon-hephaistos .pantheon-statue {
    background-image: url(/images/pantheon/hephaistos.png);
}

.pantheon-aphrodite .pantheon-statue {
    background-image: url(/images/pantheon/aphrodite.png);
}

.pantheon-hermes .pantheon-statue {
    background-image: url(/images/pantheon/hermes.png);
}

.pantheon-dionysos .pantheon-statue {
    background-image: url(/images/pantheon/dionysos.png);
}

.pantheon-hestia .pantheon-statue {
    background-image: url(/images/pantheon/hestia.png);
}

.pantheon-hades .pantheon-statue {
    background-image: url(/images/pantheon/hades.png);
}

/* Tablet */

@media (max-width: 1000px) {

    .pantheon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* Smartphone */

@media (max-width: 600px) {

    .pantheon-page {
        padding: 30px 0 45px;
    }

    .pantheon-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pantheon-entry {
        min-height: 240px;
    }

}