main #events {
    align-items: start;
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    width: 100%;
}

main #event-overview > .content {
    align-items: start;
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    width: 100%;
}

main #specials {
    align-items: center;
    background: linear-gradient(120deg, #d4d4d4, #ffffff, #d4d4d4);
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 2fr 1fr;
    height: 100%;
    margin-top: 16px;
    width: 100%;
}

main #association {
    align-items: start;
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    width: 100%;
}

main #management > .content {
    align-items: start;
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    height: 100%;
    width: 100%;
}

main #about-us {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
}

main #support-us {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
}

main #management {
    grid-column: 1 / span 2;
    grid-row: 2 / span 1;
}

@media screen and (max-width: 767px) {
    main #events {
        grid-template-columns: 1fr;
    }

    main #specials {
        grid-template-columns: 1fr;
    }

    main #association {
        grid-template-columns: 1fr;
    }

    main #about-us {
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
    }

    main #support-us {
        grid-column: 1 / span 1;
        grid-row: 2 / span 1;
    }

    main #management {
        grid-column: 1 / span 1;
        grid-row: 3 / span 1;
    }
}

@media screen and (max-width: 511px) {
    main #event-overview > .content {
        grid-template-columns: 1fr;
    }

    main #management > .content {
        grid-template-columns: 1fr 1fr;
    }
}