#main7-grid {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}
@media only screen and (min-width: 1024px) {
    #main7-grid {
        display: block;
        padding: 0 0 6rem;
        columns: 2;
        column-gap: 1rem;
    }
}

.main7-grid-item {
    display: flex;
    flex-direction: column;
    height: max-content;
}
.main7-grid-item > div.bg-black {padding: 1rem 0;}

@media only screen and (min-width: 1024px) {
    .main7-grid-item:nth-of-type(2) .main7-grid-item-book {margin-left: 1rem;}
    .main7-grid-item:nth-of-type(3) .main7-grid-item-book {margin-right: 2rem;}
    .main7-grid-item:nth-of-type(4) .main7-grid-item-book {margin-right: 1rem;}

    .main7-grid-item>div.bg-black {padding: 1rem;}

    .main7-grid-item:nth-of-type(3) div.bg-black,
    .main7-grid-item:nth-of-type(4) div.bg-black,
    .main7-grid-item:nth-of-type(5) div.bg-black {padding-left: 0;}
}

.main7-grid-item .t-sans.t-xsmall {margin-bottom: .3rem;}

#main7-grid > img {
    width: 75%;
    margin: 4rem auto;
    order: 5;
}
@media only screen and (min-width: 1024px) {
    #main7-grid > img {
        width: 60%;
        margin: 6rem auto;
        order: unset;
    }
}

@media (hover: hover) {
    .main7-grid-item-book {position: relative;}
    .main7-grid-item-book > div {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        transform: translateY(calc(100% - 2.5rem));
        transition: transform 500ms ease;
    }
    .main7-grid-item-book > div p:nth-child(2) {
        transition: 250ms;
        opacity: 0;
    }

    .main7-grid-item-book:hover > div {transform: translateY(0);}
    .main7-grid-item-book:hover > div p:nth-child(2) {opacity: 1;}
}