.projects-container {
    display: flex;
    justify-content: center;
    margin: 5em 0;
}

.grid-col-span-2 {
    grid-column: span 2;
}

.grid-col-span-3 {
    grid-column: span 3;
    
}

.grid-col-span-4 {
    grid-column: span 4;
}

.projects-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(10, 5rem);
    grid-template-rows: repeat(4, 5rem);
}

#p-1 {
    grid-row-start: 1;
    grid-row-end: 4;
}

#p-2, #p-3 {
    grid-row-start: 1;
    grid-row-end: 3;
}

#p-4 {
    grid-row-start: 1;
    grid-row-end: 5;
}

#p-6, #p-7 {
    grid-row-start: 3;
    grid-row-end: 5;
}

.project {
    background-color: #bc4b51;
    color: whitesmoke;
    border-radius: 10px;
    transition: 0.2s;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.project-text {
    opacity: 0;
    transition: 1s;
}

.project:hover {
    scale: 1.1;
    background-color: #db6e74;
}

.project:hover .project-text {
    opacity: 1;
}