header > .container {
    display: flex;
    justify-content: space-between;
    gap: var(--space-s);
    align-items: center;
}

nav ul {
    display: flex;
    gap: var(--space-l);
}

nav ul li {
    list-style-type: none;
}

:is(header, section, footer) > .container {
    width: 90%;
    max-inline-size: 1280px;
    margin-inline: auto;
}

body > .container > :is(header, main, footer) {
    margin-block: var(--space-xl);
}

body > .container > header {
    margin-block-start: 0;
}

body > .container > footer {
    margin-block-end: 0;
}

.button.cta {
    align-self: start;
    margin-block-start: var(--space-xs);
}

.button.cta:hover {
    text-decoration: none;
}

#hero-image {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 640px;
    height: auto;
}

#logo-image {
    width: auto;
    object-fit: fill;
    margin-inline-start: -16px;
}

#header-logo {
    display: flex;
    gap: var(--space-2xs);
    align-items: center;
}

.heading {
    font-size: var(--step-1);
}

#hero-row {
    align-items: center;
}

#hero-row > * {
    flex: 1;
}

#headline-column {
    gap: var(--space-s);
}

@media (max-width: 1030px) {
    #hero-row {
        flex-direction: column;
    }
}