.rock-page {
    min-height: 70vh;
    margin: 3rem 12px 12px;
    position: relative;
}

.rock-page__header {
    display: none;
}

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

.rock-page__header__nav .disabled {
    opacity: 0.3;
}

.rock-page__header__nav a:not(:first-child),
.rock-page__header__nav span:not(:first-child) {
    margin-left: 1em;
}

.rock-page__slideshow {
    aspect-ratio: 1/1;
    margin-bottom: 1rem;
}

.rock-page__slideshow .slideshow{
    height: 100%;
}

.rock-page__sizes>p:not(:first-child) {
    margin-top: 1em;
}

.rock-page__details {
    margin-bottom: 1rem;
}

.rock-page__price {
    margin-bottom: 1rem;
}

.rock-page__sizes {
    margin-bottom: 1rem;
}

.rock-page__material {
    margin-bottom: 1rem;
}

/* Desktop */
@media only screen and (min-width: 52rem) {
    .rock-page {
        padding: 12px;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: auto auto;
        align-content: space-between;
        min-height: calc(100vh - 4rem);
        margin: 0 12px 12px;
    }

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

    .rock-page__slideshow {
        aspect-ratio: unset;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        left: 0;
        min-height: calc(100vh - 4rem);
        z-index: 1;
    }

    .rock-page__slideshow .slideshow {
        min-height: calc(100vh - 4rem);
    }

    .rock-page__header {
        padding: 10px 12px;
        display: flex;
        z-index: 2;
    }

    .rock-page__header__title {
        width: 50%;
    }

    .rock-page__header__nav {
        display: flex;
        width: 50%;
        justify-content: space-between;
    }

    .rock-page__details {
        grid-column: 5/10;
        z-index: 2;
    }

    .rock-page__sizes {
        grid-column: 5/6;
        z-index: 2;
        grid-row: 3;
    }

    .rock-page__colour {
        grid-column: 6/7;
        z-index: 2;
        grid-row: 3;
    }

    .rock-page__material {
        grid-column: 7/8;
        z-index: 2;
        grid-row: 3;
    }

    .rock-page__price {
        grid-column: 8/9;
        z-index: 2;
        grid-row: 3;
    }

    .rock-page__bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}