.container {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 100vh;
}

.header {
    display: grid;
    grid-template-columns: 1fr auto;

    position: fixed;
    align-items: center;
    width: 100%;
    padding: 20px 40px;

    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.8),
        rgba(0,0,0,0.2),
        rgba(0,0,0,0)
    );

    backdrop-filter: blur(3px);
}

.nav {
    display: flex;
    gap: 30px;
}

.hero {
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}