@use "a_tailer";

.pane_main {
    margin: var(--margin-pane);

    > .body {
        background-color: var(--background-2);
        border-radius: var(--border-radius-leaf);
        padding: var(--spacing-horizontal);

        > .header {
            text-align: center;
            padding: var(--spacing-horizontal);
            width: max-content;

            margin: 0 auto;

            .title {
                background-color: var(--background-1);
                border-radius: var(--border-radius-leaf);
                padding: var(--spacing-horizontal);
            }

            .date {
                display: block;

                font-size: 0.85rem;
                font-weight: normal;
                font-style: italic;
                font-family: var(--font-family-generic);
            }
        }

        > .body {
            text-align: start;

            p {
                color: var(--white-1);
            }
        }
    }
}

@media only screen and (max-width: 500px) {
    .pane_main {
        width: 100%;
    }
}
