body {
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


@media (max-width: 600px) {
    .portfolio-container {
        padding-left: 5em !important;
        padding-right: 5em !important;
        padding-bottom: 2.5rem !important; /* for footer*/
    }
}

.portfolio-container {
    display: grid;
    column-gap: 1.5rem;
    row-gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(19em, 19em));
    padding-left: 10em;
    padding-right: 10em;
    padding-bottom: 5px;
    max-width: 1200px;
    justify-content: center;
    margin: 0 auto;

    .portfolio-end {
        grid-column: 1 / -1;
        text-align: center;
        height: fit-content;
        a { color: black; }
    }

    div {
        border: solid 2px black;
        background-color: hsl( 0deg 0% 100% );
        color: black;
        padding: 20px;
        box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
        border-radius: 7px;
        transition: all .25s ease-in-out;
      
        &:hover img {
            filter: grayscale(0);
        }

        &:hover {
            border-color: coral;
            cursor: pointer;
        }

        img {
            width: 100%;
            border-radius: 5px;
            transition: all .25s ease-in-out;
        }

        p {
            margin: 5px 0;
            margin-bottom: -11px;
            padding: 0;
            text-align: center;
            font-style: italic;
        }
    }
}