.bocks {
    border: 2px solid white;
    position: relative;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            transparent 50%,
            #000 100%
        ),
        url(../images/esoijf.gif) repeat top;

    background-size:
        100% 100%,
        64px 64px;

    background-position:
        center,
        top;

    background-repeat:
        no-repeat,
        repeat;

    image-rendering: pixelated;

    transition:
        scale 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        rotate 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);

    h1,
    p {
        text-align: center;
        position: relative;
        z-index: 1;
        margin: 0;
    }

    img {
        display: block;
        max-width: 80%;
        max-height: 100px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
        image-rendering: pixelated;
    }
}
.nonfeatured {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
	margin-bottom: 5vh;
	
}

.nonfeatured:last-child {
	margin-bottom: 0;
	
}

.featured {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 10px;

    font-size: 1.5em;
    margin-bottom: 5vh;

    .bocks {
        /* padding-top: 50px; */
        box-shadow: 0 0 50px gold;
    }

    h1 {
        font-family: "6x7 Pixel";
        font-size: 1em;
    }
}

h1 {
    font-family: "6x7 Pixel";
    font-size: 1.25em;
}

hh {
    font-family: "6x7 Pixel";
    font-size: 2em;
}

.bocks:hover {
    scale: 1.05;
    rotate: 2deg;
}

.bocks:active {
    scale: 0.9;
    rotate: -2deg;
}

/* custom bock elements should behave nicely before javascript loads */
bock {
    display: block;
    min-width: 0;
}

bock > a {
    display: block;
}

.featured > a,
.nonfeatured > a {
    color: inherit;
    text-decoration: none;
}

.featured .bocks,
.nonfeatured .bocks {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.bocks {
    padding-top: 5px;

    &:has(h1) {
        padding-top: 20px;
    }
}