:root {
    --padding: 80px;
}

.container {
    justify-content: center;
    align-items: center;
    gap: calc(var(--padding) * 2);
    min-height: 100vh; /* Ensures stable container dimensions */
}

/* INFO */
.info {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--padding) / 8);
}

.info-text {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--padding));
}

.column-text {
    text-align: justify;
    width: 100%; /* Ensures stable width before layout */

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--padding));
}

.show-more-btn {
    color: rgb(163, 163, 163);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: .5em;

}

/* SPELLS */
.spells{
    width:100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding);
}

.spells > * {
    display:block;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.spells section {
    width:100%;
    height:100%;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.curse {
    background: red;
}

.blessing {
    background: blue;
}

/*Have to repeat here again or else display:grid overrides it from styles.css*/
.hidden {
    display: none; 
}

/* MEDIA QUERIES */
@media (max-width: 768px) {
    :root {
        --padding: 20px;
    }
    
    .column-text {
        grid-template-columns: 1fr;
    }
}