.wp-block-recipes {
margin-top: 4em;
margin-bottom: 4em;
}
.wp-block-recipes h2 {
margin: 0;
text-align: center;
} .wp-block-recipes .toolbar {
display: flex;
flex-wrap: wrap;
gap: 1.5em;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.wp-block-recipes .toolbar .search,
.wp-block-recipes .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-recipes .toolbar select {
max-width: 200px;
} .wp-block-recipes .list {
display: grid;
grid-gap: 1.5em;
grid-template-columns: repeat(4, 1fr);
padding: 0;
}
.wp-block-recipes .list li {
border-radius: 4px;
overflow: hidden;
}
.wp-block-recipes .list a {
display: flex;
align-items: flex-end;
height: 14em;
position: relative;
text-decoration: none;
}
.wp-block-recipes .list li img {
height: 100%;
object-fit: cover;
position: absolute;
width: 100%;
}
.wp-block-recipes .list h5 {
background-color: #FFD100CC; margin: 0;
padding: 0.5em;
position: relative;
text-align: center;
transform: translateY(100%);
transition: transform 0.3s;
width: 100%;
}
.wp-block-recipes .list a:hover h5 {
transform: translateY(0);
} .wp-block-recipes .pagination {
display: flex;
justify-content: center;
gap: 0.5em;
margin-top: 1.5em;
padding: 0;
}
.wp-block-recipes .pagination li {
display: block;
}
.wp-block-recipes .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-recipes .pagination a:hover {
background-color: #FAF7F2;
}
.wp-block-recipes .pagination li.active a {
background-color: #FFD100;
border-color: transparent;
color: #001F59;
}
@media (max-width: 992px) {
.wp-block-recipes .list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.wp-block-recipes .toolbar .search {
flex: initial;
width: 100%;
}
.wp-block-recipes .toolbar select {
max-width: 100%;
}
.wp-block-recipes .list {
grid-template-columns: repeat(1, 1fr);
}
} .wp-site-blocks:not(.block-editor-block-list__layout) .wp-block-recipes h2,
.wp-site-blocks:not(.block-editor-block-list__layout) .wp-block-recipes .toolbar {
opacity: 0;
}
.wp-site-blocks:not(.block-editor-block-list__layout) .wp-block-recipes .list li {
transform: scale(0);
}