/* Hero */
.section-hero {
    padding: 140px 40px 40px 40px;
    background-image: url('./../compressed-assets/compressed-images/home-hero-background.jpg');
    background-position: 60%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: end;
}

._2003 {
    display: block;
    margin-left: auto;
}

.hero__title {
    display: inline-block;
}

.hero__title-large {
    display: none;
}

.hero__tag-list {
    margin-top: var(--space-200);
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: var(--space-8);
}

/* About Me */
.section-about-me {
    padding: 128px 40px 88px 40px;
}

.about-me__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
}

.about-me__button {
    margin-top: 80px;
    margin-bottom: 124px;
}

/* Projects */
.projects {
    padding: 0px 8px 200px 8px;
}

.projects__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-48);
}

.projects__title {
    display: flex;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.leading-projects {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-40);
    padding: 0px var(--space-28);
}

.project__image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    margin-bottom: var(--space-4);
}

.project__tags {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.projects-cta-container {
    margin-top: var(--space-64);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-16);
    padding: 0px var(--space-40);
}

/* Contact */
.section-contact {
    padding: 0px 40px;
}

.contact__title {
    margin-bottom: var(--space-80);
}

@media (min-width: 768px) {
    .hero__title {
        display: none;
    }

    .hero__title-large {
        display: inline-block;
    }

    .section-hero {
        padding: 200px 80px 40px 80px;
    }

    .section-about-me {
        padding: 144px 80px 180px 80px;
    }

    .projects__title {
        margin-bottom: var(--space-24);
    }

    .leading-projects {
        padding: 0px var(--space-80);
    }

    .hero__tag-list {
        gap: 12px;
    }

    .about-me__button {
        margin-bottom: 200px;
    }

    .projects {
        padding: 0px 16px 200px 16px;
    }

    .projects-cta-container {
        padding: 0px var(--space-80);
    }

    .section-contact {
        padding: 0px 80px;
    }
}

@media (min-width: 1280px) {
    .leading-projects {
        grid-template-columns: repeat(2, 1fr);
    }
}