#work .container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
#work .container .projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    justify-content: center;
    align-items: stretch;
}
#work .container .projects article {
    background-color: #110F23;
    border: 1px solid var(--secondary-color);
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
#work .container .projects article:hover {
    border-color: var(--hover-color);
    transform: translateY(-6px);
}
#work .container .projects article .card-img {
    width: 100%;
    height: 18rem;
    overflow: hidden;
}
#work .container .projects article .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
#work .container .projects article:hover .card-img img {
    transform: scale(1.05);
}
#work .container .projects article .card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    flex: 1;
}
#work .container .projects article .card-body h4 {
    font-size: 1.3rem;
    color: var(--neutral-color);
}
#work .container .projects article .card-body p {
    font-size: 1rem;
    line-height: 1.6;
    color: #c7c3d6;
}
#work .container .projects article > .btn {
    margin: 0 1.5rem 1.5rem 1.5rem;
    text-align: center;
    border-color: var(--hover-color);
    color: var(--hover-color);
    background-color: transparent;
}
#work .container .projects article > .btn:hover {
    background-color: var(--hover-color);
    color: var(--neutral-color);
}