/* ================================================== */
/* HERO */
/* ================================================== */

.hero {
    background-image: url('/assets/me.webp');
    background-position: center;
    background-size: cover;
    height: 100dvh;
    position: relative;
}

.hero .cta {
    border: 1px solid var(--color-border-light);
    backdrop-filter: url(#glass);
    box-shadow: 2px 2px 8px 1px var(--color-border-light) inset;
    transition: transform 0.5s ease, color 0.3s;
    margin-bottom: 48px;
}

.hero .cta:hover { transform: translateX(12px); }

/* ================================================== */
/* WORK */
/* ================================================== */

.work {
    background-image: url('/assets/images/desktop/work.webp');
    background-position: center;
    background-size: cover;
}

.work .h2 { max-width: 568px; }

.work .cta {
    border: 1px solid var(--color-border-light);
    backdrop-filter: url(#glass);
    box-shadow: 2px 2px 8px 1px var(--color-border-light) inset;
    transition: transform 0.5s ease, color 0.3s;
}

.work .cta:hover { transform: translateX(12px); }

/* ================================================== */
/* CURRENT */
/* ================================================== */

.current {
    background-image: url('/assets/images/desktop/echo-screenshot.webp');
    background-position: center;
    background-size: cover;
}

.current .para { max-width: 568px; }

/* ================================================== */
/* & RESPONSIVENESS */
/* ================================================== */

@media (max-width: 568px) {
    .work { background-image: url('/assets/images/phone/work.webp'); }
    .current { background-image: url('/assets/images/phone/echo-screenshot.webp'); }
}