ul.journal-map {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0;
    margin: 0;
    gap: 16px;

    @media screen and (max-width: 1024px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media screen and (max-width: 640px) {
        grid-template-columns: 1fr;
    }

    li.journal-map-item {
        list-style: none;
        overflow: hidden;
        background-color: black;

        a {
            position: relative;
            text-decoration: none;

            img {
                width: 100%;
                transition: 0.3s opacity;
            }

            &:hover {

                img {
                    opacity: 0.5;
                }

                div.journal-excerpt {
                    bottom: 0;
                    opacity: 1;
                }
            }

            div.journal-excerpt {
                transition: 0.3s all;
                padding: 16px;
                padding-top: 32px;
                position: absolute;
                bottom: -100%;
                opacity: 0;
                display: flex;
                flex-direction: column;
                gap: 4px;
                background-image: linear-gradient(0deg, black, transparent);
                
                h3 {
                    color: #97f3ff !important;
                    font-size: x-large;
                    line-height: 1.25;
                    margin: 0;
                }

                span {
                    font-size: medium;
                    color: white;
                }
            }

        }


    }
}