infomate.club/static/css/layout.css

/* Layouts and grids without any styles */
:root {
    --max-content-width: 1300px;
}

.menu {
    display: grid;
    grid-template-columns: 190px auto 100px;
    max-width: var(--max-content-width);
    margin: 0 auto;
}

.landing-top {
    max-width: var(--max-content-width);
    margin: 0 auto;
}

.landing-boards {
    max-width: var(--max-content-width);
    margin: 0 auto;
}

.header {
    display: grid;
    min-height: 250px;
    margin-bottom: 20px;
}

    @media only screen and (max-width : 570px) {
        .header {
            min-height: 170px;
            padding-top: 20px;
        }
    }

.curator {
    display: grid;
    grid-template-columns: 150px auto;
    place-self: center;
}

    @media only screen and (max-width : 570px) {
        .curator {
            grid-template-columns: 100px auto;
        }
    }

.board {
    display: block;
    position: relative;
    max-width: var(--max-content-width);
    margin: 0 auto;
}

.block {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: auto auto;
}

    .block-header {
        grid-column-start: 1;
        grid-column-end: 4;
    }

    @media only screen and (max-width : 1024px)  {
        .block {
            grid-template-columns: 50% 50%;
        }

        .block-header {
            grid-column-start: 1;
            grid-column-end: 3;
        }
    }

    @media only screen and (max-width : 570px) {
        .block {
            grid-template-columns: 100%;
        }

        .block-header {
            grid-column-start: 1;
            grid-column-end: 2;
        }

        .feed-title-hidden {
            display: none;
        }
    }

.block-login {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 500px;
    padding-top: 160px;
}

.footer {
    display: block;
}

.message-wrapper {
    padding: 100px 20px;
}

    .message-popup {
        max-width: 300px;
        padding: 20px;
        margin: 0 auto;
    }

.document {
    max-width: 700px;
    margin: 50px auto 0;
    padding: 40px;
}

    .document p {
        margin: 20px 0;
    }

.what {
    max-width: 700px;
    margin: 50px auto 0;
    padding: 40px;
}

    .what-block {
        margin: 20px 0;
        border-radius: 20px;
    }

    .what-block:target {
        color: var(--opposite-text-color);
        background-color: var(--opposite-bg-color);
    }