:root {
    --color-text: var(--color-black);
    --color-bg: var(--color-black);
    --color-banner: var(--color-gray-1);

    --color-white: hsl(0, 0%, 100%);
    --color-gray-1: hsl(224, 20%, 94%);
    --color-gray-2: hsl(224, 6%, 77%);
    --color-gray-3: hsl(224, 6%, 56%);
    --color-gray-4: hsl(224, 7%, 36%);
    --color-gray-5: hsl(224, 10%, 23%);
    --color-gray-6: hsl(224, 14%, 16%);
    --color-black: hsl(224, 10%, 10%);

    --icon-size: 1.333em;
}

body {
    color: var(--color-text);
    background-color: var(--color-bg);
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    font-size: 1.2rem;
}

h1 {
    background-color: var(--color-banner);
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: end;
    min-height: 18rem;
    margin-top: 8rem;
    font-size: 4em;
    font-weight: 500;
    font-style: normal;
    text-align: start;
    padding-left: 1rem;
}

.details {
    background-color: var(--color-banner);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    grid-row-gap: 1em;
    margin-top: 4rem;  
    padding-left: 1rem; 
}

.detail {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.detail p {
    font-weight: 300;
}

@media (min-width: 50rem) {
    h1 {
        justify-content: center;
        align-items: end;
        text-align: center;
        padding-left: 0;
    }

    .details {
        justify-content: center;
        flex-direction: row;
        grid-column-gap: 2em;
        height: 12rem;
        padding-left: 0;
    }

    .detail {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}