.display-header-container {
    display: flex;
    flex-direction: column-reverse;
    gap: 2rem;
    align-items: stretch;
    justify-content: center;

    width: 90%;
    max-width: 40rem;
    padding: 1rem;

    .display-header-info-container {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        width: 100%;

        text-align: center;

        .display-item-desc {
            display: flex;
            flex-grow: 1;
            align-items: start;

            width: 100%;

            font-size: x-large;
            line-height: 2rem;
            color: var(--clr-blue);
            text-align: center;

            @media (width >= 80rem), print {
                font-size: xxx-large;
                line-height: 3rem;
            }
        }

        @media (width >= 80rem), print {
            width: 50%;
            text-align: left;
        }
    }

    @media (width >= 80rem), print {
        flex-direction: row;
        max-width: 80rem;
    }
}