.workGrid {
    display: grid;
    gap: 1em;
    width: 75%;
    max-width: 900px;
    margin-top: 80px;
    margin-inline: auto;
    overflow: hidden;
}

/* video */
.play {
    width: 12%;
    display: unset;
    position: relative;
    top: -50%;
    margin: auto;
    transition: 0.5s;
    opacity: .5;
}

.videoPH {
    text-align: center;
    margin-bottom: -12%;
}

.videoPH:hover {
    cursor: pointer;
}

.videoPH:hover .play {
    opacity: .85;
}

.modal-dialog {
    max-width: 800px;
}

.modal-body {
    padding: .25rem;
}

.btn-close-white {
    position: absolute;
    left: 10px;
    top: 15px;
    z-index: 100;
}


/* bigger than 750px */
@media (min-width: 750px) {

    .workGrid {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-row-span-2 {
        grid-row: span 2;
    }

    .grid-row-span-4 {
        grid-row: span 4;
    }

    .annieCard {
        grid-row-start: 4;
    }

    #bookRight {
        grid-column-start: 2;
        grid-column-end: 5;
    }
}