:root {
    color-scheme: light dark;
    --backgroundColor: whitesmoke;
    --primaryColor: rgba(0, 0, 0, .8);
    --secondaryColor: rgba(0, 0, 0, .44);
    --bodyFontStack: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    --headingFontStack: "Roboto Slab", "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

html {
    background: var(--backgroundColor);
    color: var(--primaryColor);
    font: 62.5%/1.618 var(--bodyFontStack);
}

body {
    margin: 8vw;
}

header {
    grid-area: header;
    padding-top: 2em;
}

.content {
    display: grid;
    font-size: 2.4em;
    grid-gap: 1em 0.5em;
    grid-template-areas:
        "logo header device"
        "logo body device";
    grid-template-columns: min-content 1.618fr 1fr;
    grid-template-rows: min-content 1fr;
    margin: 0 auto;
    max-width: 45em;
}

article {
    grid-area: body;
}

.logo-app {
    grid-area: logo;
    padding-top: 2.3em;
    width: 2.4em;
}

.app-name {
    font: 700 2.5em/1.2 var(--headingFontStack);
    font-weight: 700;
    margin: 0;
}

.app-subtitle {
    margin: 0;
    color: var(--secondaryColor)
}

.app-short-description {
    margin: 0 0 0;
}

.download-icon {
    width: 10em;
}

.phone-image {
    grid-area: device;
    margin-left: 1em;
    max-height: 30em;
    max-width: 100%;
    width: 100%;
}