/* Main Grid Layout for the Landing Page */
#landing-page-grid {
    display: grid;
    grid-template-areas:
    "header header header header"
    "who-are-you who-are-you who-are-you who-are-you"
    "some-of-my-latest-work some-of-my-latest-work some-of-my-latest-work some-of-my-latest-work"
    "projects projects projects projects";

    grid-template-rows: minmax(60px, 8vh) minmax(100px, 18vh) minmax(60px, auto) auto; 
    grid-template-columns: repeat(4, minmax(2rem, 1fr));
}

/* STYLE: LANDING PAGE BODY */
.who-are-you {
    grid-area: who-are-you;
    border-bottom-left-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
    position: relative;
    overflow: hidden;
}

.who-are-you #my-picture {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(25%);
    z-index: 1;
    align-items: center;
}
.who-are-you::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 22%;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0)
    );

    z-index: 2;
    pointer-events: none;
}

.some-of-my-latest-work {
    grid-area: some-of-my-latest-work;
    justify-self: center;
    align-self: end;
    
}
.text {
    font-family: var(--font-mono);
    font-size: 1em;
    letter-spacing: 0.05em;
    color: #000000;
    opacity: 0.8;
}

.projects {
    grid-area: projects;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.project-card {

    border-radius: 0.4rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
    

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: minmax(100px, 8vh) minmax(250px, 40vh) 0.2fr;
    row-gap: 1rem;
    grid-template-areas: 
    "project-header project-header project-header"
    "project-hero project-hero project-hero"
    "project-cta . project-story-cta";
}

.project-header {
    grid-area: project-header;
    display: flex;
    flex-direction: column;
    border-top-left-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
    
    justify-content: center;
    align-items: flex-start;
    gap: 0.5rem;
    padding-left: 0.5rem;

    background-color: gray;
}
.project-name {
    font-family: var(--font-sans);
    font-weight: 200;
    font-size: medium;
}

.project-header img {
    width: 3rem;
    height: 3rem;
}
.project-hero img {
    width: 100%;
    height: 100%;
}


.project-hero {
    grid-area: project-hero;
    
    border-radius: 0.4rem;
}

.project-cta {
    grid-area: project-cta;
    border: 1px solid #e0e0e0;
    border-radius: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
    text-decoration: none;
    background-color: #e0e0e0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.project-story-cta {
    grid-area: project-story-cta;
    border: 1px solid #e0e0e0;
    border-radius: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
    text-decoration: none;
    background-color: #e0e0e0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.project-story-cta:hover p {
    opacity: 0.7;
}
.project-story-cta p {
    font-family: var(--font-mono);
    color: black;
    font-size: 0.7em;
    font-weight: 500;
    letter-spacing: 0.03em;
    margin: 0;
}

.project-story-cta img {        
    border: none;
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 0.2s ease;
}

.project-story-cta:hover img {
    transform: translateX(3px);
}

.project-cta:hover p {
    opacity: 0.7;
}
.project-cta p {
    font-family: var(--font-mono);
    color: black;
    font-size: 0.7em;
    font-weight: 500;
    letter-spacing: 0.03em;
    margin: 0;
}

.project-cta img {        
    border: none;
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 0.2s ease;
}

.project-cta:hover img {
    transform: translateX(3px);
}
@media (min-width: 475px) {
    .container {
        max-width: 475px;
    }
}
@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}
@media (min-width: 1024px) {
    .container {
        max-width: 768px;
    }
}
@media (min-width: 1280px) {
    .container {
        max-width: 768px;
    }
}