crosswords/css/index.less

body.home {
    @grid-size: 150px;

    .grids-wrapper {
        text-align: center;
    }

    .grids {
        list-style: none;
        padding: 0;
        margin: auto;
        max-width: 1640px;
        width: 100%;
    }

    .grid {
        display: inline-block;
        height: @grid-size;
        width: @grid-size;
        overflow: hidden;
        margin: 18px;
        background-size: 112%;
        background-repeat: no-repeat;
        background-position: center;
        border: 1px solid @border-color;

        transition: background-size 0.2s ease-in;

        &:hover {
            background-size: 120%;
        }

        &.crossword {
            background-image: url("img/crosswords.svg");
        }

        & > a {
            position: relative;
            display: inline-block;
            height: @grid-size - 85px;
            width: 100%;
            padding-top: 85px;

            text-decoration: none;
            color: black;
        }
    }

    .grid-difficulty {
        position: absolute;
        right: -40px;
        top: 20px;
        width: 100%;
        padding: 2px 0;
        transform: rotate(45deg);
        background-color: rgba(255, 135, 135, 0.95);
        color: white;
        font-weight: 700;
        text-align: center;
    }

    .grid-provider,.grid-date {
        display: block;
        padding: 0.25em 0;
        text-align: center;
        background: rgba(0, 0, 0, 0.65);
        color: white;
    }

    .grid-provider {
    }

    .grid-date {
        font-weight: 700;
    }
}