.book-cover-design picture, .gspb_image.book-cover-design, .book-cover-design:has(:not(picture)) a { 
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    display: block;
}

.book-cover-design picture:before, .gspb_image.book-cover-design:before, .book-cover-design:has(:not(picture)) a:before {
    position: absolute;
    content: ' ';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: -o-linear-gradient(left, rgba(2, 0, 36, .5) 0%, rgba(0, 0, 0, .5) 2%, rgba(255, 255, 255, .5) 3%, rgba(247, 254, 255, .5) 5%, rgba(0, 0, 0, .5) 7%, rgb(255 255 255 / 4%) 13%, rgb(255 255 255 / 0%) 100%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(2, 0, 36, .5)), color-stop(2%, rgba(0, 0, 0, .5)), color-stop(3%, rgba(255, 255, 255, .5)), color-stop(5%, rgba(247, 254, 255, .5)), color-stop(7%, rgba(0, 0, 0, .5)), color-stop(13%, rgb(255 255 255 / 4%)), to(rgb(255 255 255 / 0%)));
    background: linear-gradient(90deg, rgba(2, 0, 36, .5) 0%, rgba(0, 0, 0, .5) 2%, rgba(255, 255, 255, .5) 3%, rgba(247, 254, 255, .5) 5%, rgba(0, 0, 0, .5) 7%, rgb(255 255 255 / 4%) 13%, rgb(255 255 255 / 0%) 100%);
    z-index: 10;
    pointer-events: none;
}



/* book color boxes */
li:has(.book-color-box) {
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

li:has(.book-color-box):is(:hover, :focus) {
    -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
            transform: translateY(-10px);
}

/* make the second and then every 3 li with .book-color-box have a different background color */
li:has(.book-color-box):nth-child(2n) .book-color-box {
    background-color: var(--wp--preset--color--accent-4)
}
li:has(.book-color-box):nth-child(3n) .book-color-box {
    background-color: var(--wp--preset--color--contrast);
}

.black-fade {
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(-20%, rgba(0, 0, 0, 0)), color-stop(10%, rgb(0, 0, 0)), color-stop(90%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) -20%, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
            mask-image: -webkit-gradient(linear, left top, right top, color-stop(-20%, rgba(0, 0, 0, 0)), color-stop(10%, rgb(0, 0, 0)), color-stop(90%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
            mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) -20%, rgb(0, 0, 0) 10%, rgb(0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
}