Bản mẫu:Thay đổi gần đây/style.css

.container {
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap:5px;
    width: 100%;
    font-family: sans-serif;
    padding: 5px;
}

.element {
    border-radius: 4px;
}

.element.header {
    grid-column: span 12;
    background-color: #e9ddaf;
    padding: 1vmin;
    color: #193351;
    text-align: center;
    font-weight: bold;
    font-size: 2vmin;
    transition: all 0.25s ease-in-out;
}

.element.body {
    position: relative;
    grid-column: span 3;
    overflow: hidden;
}

.element.body a,
.element.body a:visited {
    position: relative;
    display: block;
    text-decoration: none;
    background-color: #eee7d0;
    color:#447dbe;
    font-weight: bold;
    font-size: 2vmin;
    padding: 3vmin 0;
    text-align: center;
    transition: all 0.15s ease-in-out;
}

.element.body a:hover {
    background-color:#6197d3;
    color: #f7f2e1;
}

.element.body a:active {
    background-color:#345982;
    color: #e9ddaf;
}

.element.footer {
    grid-column: span 12;
    background-color: #f7f2e1;
    padding: 0.5vmin;
    color: #727e8b;
    text-align: center;
    font-style: italic;
    font-size: 1.25vmin;
}

@media screen and (max-width: 1024px) {

    .element.header {
        font-size: 3vmin;
    }
    .element.body {
        grid-column: span 6;
    }

    .element.body a {
        font-size: 3vmin;
        padding: 5vmin 0;
    }

    .element.footer {
        padding: 1vmin;
        font-size: 2vmin;
    }
}