@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Open+Sans:ital,wght@1,400&display=swap');

/* Shared blog banner layout and typography */
.blog-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border-top: 5px solid;
    border-bottom: 5px solid;
}

.blog-banner img {
    height: 55px;
    width: auto;
    flex-shrink: 0;
    display: block; /* baseline alignment */
}

.blog-banner h1 {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.8rem;
    margin: 0;            /* normalize spacing */
    line-height: 1.2;     /* compact heading */
}

.blog-banner p {
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    margin: 0;            /* normalize spacing */
    font-size: 1rem;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .blog-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .blog-banner img {
        height: 42px;
    }

    .blog-banner h1 {
        font-size: 1.4rem;
    }
}