* {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

h1 {
    text-align: center;
    margin-top: 80px;
}

#grid-container {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
}

.overlay {
    width: 100%;
    border-radius: 30px;
}

.item {
    object-fit: contain;
    margin: 1%;
    max-width: 45%;
    border: solid 3px #55414A;
    border-radius: 15px;
}

.assets {
    padding: 5%;
}

.grid-item .overlay {
    /* transform: translateY(20px); */
    opacity: 0.3;
}

.grid-item:hover .overlay {
    transform: translateY(0);
    opacity: 1;
    transition: all 0.25s ease-out;
}

@media only screen and (min-width: 650px) and (orientation: landscape) {
    
    #grid-container {
        grid-template-columns: 1fr 1fr;
    }
}