#portfolio {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0;
}

.gallery {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
    grid-template-columns: repeat(4, 1fr);
    /* max-width: 1000px; */
    gap: 1vw;
    padding: 20px 1vw;
}

.tile {
    position: relative;
    border-radius: 0.5vw;
    transition: transform 0.2s ease;
    transform-origin: center;
    cursor: pointer;
}

.tile:hover {
    transform: scale(1.02);
    z-index: 5;
}

.tile-wide {
    grid-column: span 2
}

.gallery img, .gallery video {
    width: 100%;
    height: 100%;
    border-radius: 0.5vw;
}
.gallery img {
    object-fit: cover;
}

.gallery-heading {
    margin: 4rem 0rem 2rem 0rem;
    font-weight: lighter;
    cursor: pointer;
}
.gallery-heading svg {
    transition: transform 0.2s ease;
}
.gallery-heading:hover svg {
    transform: translateY(5px);
}

.tile .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0%;
    transform-origin: center;
    transition: opacity 0.4s ease;
}

.tile:hover .play{
    opacity: 100%;
    transition: opacity 0.4s ease;
}