.rocks-page {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    padding: 3rem 12px 12px;
}

.rocks-page__row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.rock-block {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
    min-height: 30vh;
}

.rock-block.white,
.rock-block.white a {
    color: white;
}

.rock-block__slideshow,
.rock-block__cover {
    grid-column: 1/-1;
    aspect-ratio: 5/6;
}

.rock-block__cover {
    object-fit: cover;
    display: flex;
}

.rock-block__title {
    position: absolute;
    top: 6px;
    left: 10px;
    z-index: 10;
}

.rock-block__link {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    z-index: 20;
}

.rock-block__sizes {
    margin-top: 1rem;
}

.rock-block__material,
.rock-block__price,
.rock-block__sizes {
    margin-bottom: 0.75rem;
}


.rock-block__title sup {
    display: inline-block;
    transform: translateY(0.3em);
}


.rock-block__sizes > p:not(:first-child) {
    margin-top: 1em;
    z-index: 10;
}

/* Desktop */
@media only screen and (min-width: 52rem) {
    .rocks-page {
        min-height: 100vh;
        padding: 3rem 12px 12px
    }

    .rocks-page__row {
        display: grid;
        width: 100%;
        grid-gap: 1rem;
        flex-wrap: nowrap;
        grid-template-columns: repeat(4, 1fr);
        margin-bottom: 1rem;
    }

    .rock-block {
        margin-bottom: 0;
    }

    .rock-block.white {
        color: white;
    }

    .rock-block.col-4 {
        grid-column: span 4;
        grid-template-columns: repeat(4, 1fr);
    }

    .rock-block.col-4 .rock-block__slideshow,
    .rock-block.col-4 .rock-block__cover {
        aspect-ratio: 2/1;
    }

    .rock-block.col-2 {
        grid-column: span 2;
        grid-template-columns: repeat(4, 1fr);
    }

    .rock-block.col-2 .rock-block__slideshow,
    .rock-block.col-2 .rock-block__cover {
        aspect-ratio: 4/3;
    }

    .rock-block.col-1 {
        grid-column: span 1;
    }

    .rock-block.col-1 .rock-block__slideshow,
    .rock-block.col-1 .rock-block__cover {
        aspect-ratio: 1/1;
    }


    .rock-block__title,
    .rock-block__sizes,
    .rock-block__weight,
    .rock-block__material,
    .rock-block__price,
    .rock-block__details {
        display: block;
        position: absolute;
        opacity: 0;
        transition: 300ms;
        z-index: 100;
    }
    

    .rock-block__title {
        position: absolute;
        top: 6px;
        left: 10px;
        top: 1rem;
        left: 1rem;
    }

    .rock-block.col-4 .rock-block__details,
    .rock-block.col-2 .rock-block__details {
        top: 1rem;
        left: calc(50%);
        width: calc(50% - 1rem);
    }


    .rock-block .rock-block__sizes,
    .rock-block .rock-block__weight,
    .rock-block .rock-block__material,
    .rock-block .rock-block__price {
        bottom: 1rem;
    }

    /* Large */
    .rock-block.col-4 .rock-block__sizes {
        left: 1rem;
        width: calc(12.5% - 1rem);
    }

    .rock-block.col-4 .rock-block__weight {
        left: 25%;
        width: calc(12.5% - 1rem);
    }

    .rock-block.col-4 .rock-block__material {
        left: calc(50% + 0.5rem);
        width: calc(12.5% - 1rem);
    }

    .rock-block.col-4 .rock-block__price {
        left: 75%;
        width: calc(12.5% - 1rem);
    }

    /* Medium */
    .rock-block.col-2 .rock-block__sizes {
        left: 1rem;
        width: calc(25% - 2rem);
    }

    .rock-block.col-2 .rock-block__weight {
        left: 25%;
        width: calc(25% - 1rem);
    }

    .rock-block.col-2 .rock-block__material {
        left: 50%;
        width: calc(25% - 1rem);
    }

    .rock-block.col-2 .rock-block__price {
        left: 75%;
        width: calc(25% - 1rem);
    }

    .rock-block:hover .rock-block__title,
    .rock-block:hover .rock-block__sizes,
    .rock-block:hover .rock-block__weight,
    .rock-block:hover .rock-block__material,
    .rock-block:hover .rock-block__price,
    .rock-block:hover .rock-block__details {
        opacity: 1;
    }

    .rock-block.col-1 .rock-block__weight,
    .rock-block.col-1 .rock-block__material,
    .rock-block.col-1 .rock-block__sizes,
    .rock-block.col-1 .rock-block__details,
    .rock-block.col-1 .rock-block__price {
        display: none;
    }

    
}