.library-announcements {
    padding: 92px clamp(24px, 7vw, 112px);
    color: #f8f4ea;
    background: #17352d;
}

.announcement-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    gap: 48px;
    align-items: end;
    margin-bottom: 44px;
}

.announcement-heading .eyebrow {
    margin-bottom: 14px;
    color: #d9b976;
}

.announcement-heading h2 {
    margin: 0;
    font: clamp(38px, 4.5vw, 64px)/1 "Libre Caslon Display", Georgia, serif;
    letter-spacing: 0;
}

.announcement-heading > p {
    margin: 0;
    color: #becbc5;
}

.public-announcement-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.public-announcement {
    min-width: 0;
    padding: 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.public-announcement.is-pinned {
    box-shadow: inset 4px 0 #d09b4e;
}

.announcement-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.announcement-meta time {
    color: #9eb0a8;
    font-size: 11px;
}

.announcement-category {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    color: #102720;
    background: #dcb56f;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.announcement-category.activity {
    color: #18324a;
    background: #b7d4e5;
}

.announcement-category.new_book {
    color: #4b2330;
    background: #e5bbc8;
}

.announcement-category.info {
    color: #243d32;
    background: #c5d9cf;
}

.public-announcement h3 {
    margin: 22px 0 12px;
    overflow-wrap: anywhere;
    font: 30px/1.08 "Libre Caslon Display", Georgia, serif;
    letter-spacing: 0;
}

.public-announcement > p {
    margin: 0;
    color: #c9d3ce;
    overflow-wrap: anywhere;
}

.public-announcement > a {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    min-height: 44px;
    margin-top: 22px;
    color: #f0d59d;
    font-size: 12px;
    font-weight: 700;
    border-bottom: 1px solid rgba(240, 213, 157, 0.5);
}

@media (max-width: 760px) {
    .library-announcements {
        padding: 70px 20px;
    }

    .announcement-heading {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .public-announcement-list {
        grid-template-columns: 1fr;
    }

    .public-announcement {
        padding: 24px 20px;
    }

    .public-announcement h3 {
        font-size: 28px;
    }
}