.diary-item {
    cursor: pointer;
    text-align: center;
}

.diary-item img {
    --f: .15; /* the parallax factor (the smaller the better) */
    --r: 10px; /* radius */

    --_f: calc(100% * var(--f) / (1 + var(--f)));
    --_a: calc(90deg * var(--f));
    width: 250px; /* the image size */
    aspect-ratio: calc(1 + var(--f));
    object-fit: cover;
    clip-path: inset(0 var(--_f) 0 0 round var(--r));
    transform: perspective(400px) var(--_t, rotateY(var(--_a)));
    transition: .5s;
    cursor: pointer;
}

.diary-item img:hover {
    clip-path: inset(0 0 0 var(--_f) round var(--r));
    --_t: translateX(calc(-1 * var(--_f))) rotateY(calc(-1 * var(--_a)));
}

@media (max-width: 768px) {
    .diary-item img {
        transform: none;
        clip-path: none;
        --_t: none;
        border-radius: 10px;
    }

    .diary-item img:hover {
        transform: none;
        clip-path: none;
        --_t: none;
    }
}

.diary-item h3 {
    margin-top: 10px;
    font-size: 1.2em;
}

.diary-modal-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.diary-modal {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
}