@import url("/assets/stylesheets/base.css");

#atelier {
    color-scheme: only dark;
    background:
        var(--picture-gradient),
        url("/assets/couverture-accueil.jpeg") center / cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing);

    .slogan {
        font-size: 3rem;
        line-height: 1.1;
        font-weight: 900;
    }

    h1,
    p {
        width: 49vw;
        margin: 0;
        color: var(--on-background-strong);
        @media (max-width: 1000px) {
            width: auto;
        }
    }

    p br {
        margin-bottom: 0.5rem;
    }

    figure {
        --date-size: 60rem;
        color-scheme: light dark;
        margin: 0;
        padding: calc(var(--spacing) / 2);
        background: var(--background);
        width: max-content;
        align-items: center;
        border-radius: var(--radius);
        display: grid;
        grid-template-columns: calc(var(--date-size) / 16) auto auto;
        grid-template-rows: calc(var(--date-size) / 16);
        gap: calc(15rem / 16);

        time {
            padding: calc(var(--spacing) / 3);
            background: var(--dimmed-background);
            color: var(--on-dimmed-background);
            align-self: stretch;
            justify-self: stretch;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            border-radius: calc(var(--radius) / 2);
            font-weight: 600;

            span:first-of-type {
                font-size: calc(30rem / 16);
                line-height: calc(30rem / 16);
            }

            span:nth-child(2) {
                font-size: calc(15rem / 16);
                line-height: calc(15rem / 16);
            }
        }

        figcaption {
            display: contents;

            span {
                display: block;
                color: var(--on-background-primary);
                font-size: calc(18rem / 16);
                line-height: calc(22rem / 16);

                strong {
                    display: block;
                    font-size: calc(24rem / 16);
                    line-height: calc(28rem / 16);
                    color: var(--on-background-primary-light);
                }
            }
        }
    }
}