.wp-block-posts {
margin-top: 4em;
margin-bottom: 4em;
}
.wp-block-posts h2 {
margin: 0;
text-align: center;
} .wp-block-posts .toolbar {
display: flex;
flex-wrap: wrap;
gap: 1.5em;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.wp-block-posts .toolbar .search,
.wp-block-posts .toolbar select {
background-color: #FFFFFF;
border: 1px solid #BCB4A9;
border-radius: 4px;
color: #BCB4A9;
flex: 1;
font-family: 'Calibri';
padding: 0.5em 0.75em;
}
.wp-block-posts .toolbar select {
max-width: 200px;
} .wp-block-posts .list {
display: grid;
grid-gap: 1.5em;
grid-template-columns: repeat(3, 1fr);
padding: 0;
}
.wp-block-posts .list li {
border-radius: 4px;
display: flex;
flex-direction: column;
margin-bottom: 1em;
overflow: hidden;
}
.wp-block-posts .list li > img {
display: block;
height: 10em;
object-fit: cover;
width: 100%;
}
.wp-block-posts .list li > div {
background-color: #FAF7F2;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
padding: 0.75em;
}
.wp-block-posts .list h5 {
margin: 0;
}
.wp-block-posts .list a {
color: #001F59;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5em;
text-decoration: none;
} .wp-block-posts .pagination {
display: flex;
justify-content: center;
gap: 0.5em;
margin-top: 1.5em;
padding: 0;
}
.wp-block-posts .pagination li {
display: block;
}
.wp-block-posts .pagination a {
background-color: #FFFFFF;
border: 1px solid #BCB4A9;
border-radius: 4px;
color: #BCB4A9;
font-family: 'Calibri';
padding: 0.5em 0.75em;
text-decoration: none;
}
.wp-block-posts .pagination a:hover {
background-color: #FAF7F2;
}
.wp-block-posts .pagination li.active a {
background-color: #FFD100;
border-color: transparent;
color: #001F59;
}
@media (max-width: 992px) {
.wp-block-posts .list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.wp-block-posts .toolbar .search {
flex: initial;
width: 100%;
}
.wp-block-posts .toolbar select {
max-width: 100%;
}
.wp-block-posts .list {
grid-template-columns: repeat(1, 1fr);
}
} .wp-site-blocks:not(.block-editor-block-list__layout) .wp-block-posts h2,
.wp-site-blocks:not(.block-editor-block-list__layout) .wp-block-posts .toolbar {
opacity: 0;
}
.wp-site-blocks:not(.block-editor-block-list__layout) .wp-block-posts .list li {
transform: scale(0);
}