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-info {
    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: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    max-width: var(--max-content-width);
    margin: 0 auto;
}

.block {
    display: block;
}

    .block-100 {
        width: 100%;
    }

    .block-50 {
        width: 49%;
    }

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


.feeds {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

    .feed {
        width: 100%;
        min-width: 200px;
        box-sizing: border-box;
    }

    .feeds-3 .feed {
        width: 33%;
    }

    .feeds-2 .feed {
        width: 50%;
    }

    .feed .article-tooltip {
        /* Shift tooltip to right */
        left: 80%;
        top: -100px;
        right: auto;
        bottom: auto;
    }

    .feeds-3 .feed:nth-child(3n) .article-tooltip,
    .feeds-2 .feed:nth-child(2n) .article-tooltip,
    .block-50:nth-child(2n+1) .article-tooltip {
        /* Shift tooltip to left */
        left: -105%;
        top: -100px;
        right: auto;
        bottom: auto;
    }

    @media only screen and (max-width : 1024px)  {
        /* Switch 3 to 2-columns */
        .feeds-3 .feed {
            width: 50%;
        }

            .feeds .feed .article-tooltip,
            .feeds-3 .feed:nth-child(3n) .article-tooltip {
                /* Shift tooltip to right */
                left: 85%;
                top: -200px;
                right: auto;
                bottom: auto;
            }

            .feeds-3 .feed:nth-child(2n) .article-tooltip {
                /* Shift tooltip to left */
                left: -105%;
                top: -100px;
                right: auto;
                bottom: auto;
            }
    }

    @media only screen and (max-width : 750px) {
        /* Single column everywhere */
        .feeds .feed {
            width: 100%;
        }

            .feeds .feed .article-tooltip {
                /* Shift tooltip up */
                bottom: 25px !important;
                left: 0 !important;
                right: auto !important;
                top: auto !important;
            }
    }

    @media only screen and (max-width : 570px) {
        .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;
}