.project-container {
    min-height: calc(600px + var(--header-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-cards-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.5rem;
}

.project-card {
    width: 400px;
    height: 150px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    background-color: var(--clr-secondary);
    border-radius: 12px;
    color: var(--clr-primary);
    box-shadow: 0 0 3px 0 var(--clr-secondary);
}

.project-card:hover {
    cursor: pointer;
    transform: translate(5px, 5px);
    transition: all .3s ease-in;
}

.project-card:hover h2 {
    text-decoration: underline;
}

.project-card ::selection {
    background-color: var(--clr-accent);
}

.project-left {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    justify-content: center;
}

.project-left .project-detail h2 {
    font-size: clamp(.75rem, 4vw, 1.5rem);
}

.project-left .project-detail p {
    font-size: clamp(.5rem, 3vw, 1rem);
    margin-top: .25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.project-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.project-right a:nth-child(1) i:hover {
    scale: 1.2;
    transition: all .5s ease;
}

.project-right a:nth-child(2) i:hover {
    scale: 1.2;
    transition: all .5s ease;
}

.project-right a i {
    color: white;
    font-size: clamp(1.25rem, 4vw, 2rem);
}

.tech-stacks {
    font-size: clamp(0.4375rem, 4vw, .875rem);
    display: flex;
    gap: 1rem;
}

.tech-stacks span i,
.tech-stacks span p {
    display: inline;
}

.github-link a i {
    color: var(--clr-white);
}