.showcase {
    background:var(--white);
    color:var(--grey);

    padding-block:2rem 1rem;
}

.showcase h2 {
    font-size:1.5rem;
    font-weight:300;
    text-align:center;
    margin:0 auto 1.5rem auto;
}

.showcase .projects {
    margin-inline:auto;
    padding-inline:1rem;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    max-width:var(--max-width);
}

.showcase .projects a.project {
    display:block;
    box-shadow: var(--shadow);
    text-decoration: none;
    border-radius:0.25rem;
    overflow: hidden;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.showcase .projects a.project:hover {
    transform:translateY(-0.25rem);
    box-shadow:0px 2px 6px rgba(0,0,0,0.3);
}

.showcase .projects a.project .project-image img {
    object-fit: cover;
    width:100%;
    aspect-ratio: 16 / 9;
}
.showcase .projects a.project .project-image {
    border-radius:0.25rem;
}

.showcase .project-text {
    display:flex;
    align-items: center;
    padding:1rem;
    color:var(--grey);
}

.showcase .project-text .project-title {
    font-weight:500;
    text-shadow: var(--shadow);
}

.showcase .project-text .project-date {
    font-size:0.75rem;
    opacity: 0.5;
}

.showcase .project-text .project-date {
    margin-left:auto;
}


.showcase .see-more {
    display:flex;
    justify-content: center;
}

.showcase .see-more a {
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    color:var(--grey);
}

.showcase .see-more svg {
    fill:var(--grey);
    width:1.25rem;
}