/* PROJECTS - MOBILE FIRST */
.projects-container {
    background-color: #EEE785;
    min-height: 0;
    font-family: inherit;
}

.project-item {
    box-shadow: 0 0 0 2px #1E1E1E;
} 

.project-item a {
    text-decoration: none;
}

.hide-project {
    display: none;
}

.project-img {
    width: 100%;
    margin: 0;
    padding: 0;
    display: inline-block;
}

.title-box {
    background-color: #62ADE3;
    padding: 0.3em 0.7em;
}

.title-box p {
    padding: 0;
    margin: 0.3em 0;
    color: #1E1E1E;
}

.project-stack {
    padding: 0.3em 0.4em 0 0.4em;
}

.tab-header{
    padding: 0.6em 1em;
}

.tab-title, .year{
    display: flex;
    justify-content: space-between;
}

hr {
    border: none;
    height: 2px;
    background-color: #1E1E1E;
    width: 80%;
}

.tab-title h2 {
    font-size:2.3rem;
    margin: 0;
    padding: 0;
}

.tab-title p, .year p {
    font-size: 0.80rem;
    margin: 0;
    padding: 0;
}

.project-item:hover .title-box {
    background-color: #EEE785;
}

.project-item:hover .title-box p {
    color: #1E1E1E;
}

.project-item .skill-item {
    transition: background-color 0.2s ease;
}

.project-item:hover .skill-item {
    background-color: #EEE785 !important;
} 

.project-item {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.project-item:hover {
    transform: translate(-4px, -4px);
    box-shadow: 
        4px 4px 0 #1E1E1E,
        0 0 0 2px #1E1E1E;
}

.project-item:active {
    transform: translate(0, 0);
    box-shadow: 
        0 0 0 2px #1E1E1E;
}

/* MEDIA QUERY */
@media(min-width: 768px){
    .projects-container-expand {
        .projects-content{
            grid-template-rows: 40px repeat(3, 1fr) 40px;
            grid-template-columns: 1fr 1fr;
            gap: 1em;
        }

        .proj1, .proj2 {
            grid-row: 2/3;
        }

        .proj4, .proj3 {
            grid-row: 3/4;
        }

        .proj5{
            grid-row: 4/5;
        }

        .mini-proj-link{
            grid-row: 5/6;
        }
    }


}