main {
    width: 100%;
}
/* 
#content_container {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-bottom: 2rem;
} */

#portfolio_container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    
    gap: 0.5rem;
    
    max-width: 90%;
    margin-inline: auto;
    margin-bottom: 4rem;

    padding-left: 0.5rem;
    padding-right: 0.5rem;
    
    img {
        display: block;

        width: 100%;
    }
}

#portfolio_container > * {
    flex-grow: 1;
    flex-basis: calc((30rem - 100%) * 999);
    /* if container < 30rem wide, set basis to large negative value (effectively 0) */
    /* flex-grow then allows it to fill the width of its container */
    /* if there's more, set basis to large positive value and fill that space */
    /* idea from https://piccalil.li/blog/a-simple-masonry-like-composable-layout/ */
}

.portfolio_flow > * + * {
    margin-top: 0.5rem;
}

.portfolio_item {
    position: relative;

    overflow: hidden;
}

.portfolio_item_info {
    position: absolute;
    bottom: 0;
    left:0;

    width: 100%;
    height: auto;

    transform: translateY(100%);
    transform-origin: bottom;
    transition: transform 0.3s ease-in-out;

    color: white;

    background-image: linear-gradient(to top, rgba(0,0,0,0.5), transparent);

    font-family: Lexend, sans-serif;

    h3 {
        margin-block: 1.5rem;
        margin-inline: 1rem;

        font-weight: 300;
    }
}

.portfolio_item:hover {
    .portfolio_item_info {
        transform: translateY(0%);
    }
}

@media (pointer: coarse) {
    .portfolio_item_info {
        transform: translateY(0%);

        h3 {
            font-size: 1rem;
            opacity: 50%;
        }
    }
}