body {
    min-height: 100vh;
}

footer {
    margin-top: auto;
    margin-bottom: 0;
}

.center-content{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    margin-bottom: auto;
}

.centered-grid {
    display: grid;
    width: 100%;
    max-width: 800px;
    overflow: hidden; /* clips SVG if it exceeds the grid */
}

    .centered-grid > svg{
        grid-row: 1;
        grid-column: 1;
        margin-top: auto;
        margin-bottom: 0;
        max-width: 100vw;
    }

    .centered-grid > main {
        grid-row: 1;
        grid-column: 1;
        display: flex;
        flex-direction: column;
        gap: var(--medium-gap);
        padding: var(--d-large-gap);
    }


.club-wrapper {
    height: var(--d-large-gap);
    max-height: var(--d-large-gap);
    background-color: var(--gray-bg);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
    display: flex;
    justify-content: start;
    align-items: center;
    gap: var(--pill-gap);
    padding: var(--pill-gap) var(--large-gap);
    border-radius: var(--large-gap);
}

    .club-wrapper > h1 {
        margin: 0;
        line-height: normal;
        font-size: 2.4rem;
        max-width: min(60vw, 45ch);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wrapper-logo {
        height: calc(var(--d-large-gap) - var(--medium-gap));
        aspect-ratio: 1;
    }

.content-wrapper {
    background-color: var(--gray-bg);
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
    gap: var(--pill-gap);
    padding: var(--large-gap);
    border-radius: var(--large-gap);
}

    .content-wrapper h2 {
        padding: 0;
        margin: 0;
    }

    .content-wrapper p {
        padding: 0;
        margin: var(--pill-gap) 0;
    }

@media (max-width: 700px) {
    .centered-grid > main {
        padding: var(--medium-gap);
        padding-bottom: var(--large-gap);
    }

    .content-wrapper {
        padding: var(--large-gap) var(--medium-gap);
    }

    .club-wrapper {
        padding: var(--pill-gap) var(--medium-gap);
    }
}