header {

    background-image: var(--background-image), var(--sunrise-gradient);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;

    & > hgroup {
        padding: var(--padding);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        & > img {
            width: 15rem;
            align-self: center;
            border-radius: 50%;
            box-shadow: 0 0 20px var(--gold-1);
        }

        & > h1 {
            color: var(--gold-1);
            font-size: 3rem;
            text-shadow: 0 0 5px var(--gold-1);
        }

        & > p {
            margin-bottom: var(--margin);
            color: var(--gold-4);
            font-size: 1.5rem;
        }
    }
}

main {

    & > section:nth-child(1) {
        & > h3 {
            color:var(--gold-4);
        }
    }

    & > #offers > div {
        display: flex;
        flex-direction: column;
        gap: 4rem;

        & > div {
            --background-image: unset;

            max-width: 40rem;
            padding: var(--padding);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            gap: 2rem;
            background-color: #3c3228;
            background-image: var(--background-image);
            background-blend-mode: multiply;
            background-position: center;
            background-size: cover;
            border-radius: 3rem;

            & > h3 {
                font-size: 1.8rem;
            }

            & > p {
                color: white;
            }
        }
    }
}

@media screen and (min-width:960px) {
    main > #offers > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;

        & > h2 {
            grid-column: 1 / 3;
        }

        & > div {
            height: 100%;
            max-width: 100%;

            & > h3 {
                font-size: 2rem;
            }
        }
    }
}