.wbe-element-container {
width: 100%;
}
#wbe-response {
display: flex;
flex-direction: column;
align-items: center;
}
.wbe-posts {
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: repeat(auto-fill, minmax(23em,1fr));
grid-column-gap: 1.2em;
grid-row-gap: 4em;
}
.wbe-posts__load-more {
color: #fff;
background-color: #0069ff;
border-radius: 0.25em;
padding: 0.8em 2.5em 0.8em 2.5em;
margin-top: 2.5em;
margin-bottom: 2.5em;
font-size: 1.8rem;
transition: .3s ease-in-out all;
}
.wbe-posts__load-more:hover {
background-color: #217dff;
}
.wbe-post {
display: flex;
flex-direction: column;
position: relative;
transition: .3s ease-in-out all;
}
.wbe-post:hover {
transform: translateY(-1rem);
}
.wbe-post__image-wrapper {
order: -1;
}
.wbe-post__image {
width: 100%;
object-fit: cover;
border-radius: 0.25em;
aspect-ratio: 16 / 9;
}
.wbe-post__body-container {
display: flex;
flex-direction: column;
row-gap: 1em;
margin-top: 1em;
margin-bottom: 1em;
}
.wbe-post__footer {
margin-top: auto;
}
.wbe-post__link {
font-size: 1.6rem;
font-weight: 600;
}
.wbe-post__link::after {
content:"→";
margin-left: 1em;
}
.wbe-post__heading {
font-size: 2rem;
}
.wbe-post__heading > a::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
.wbe-post__text {
position: relative;
font-size: 1.6rem;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.wbe-post__text::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0) 50%, #ffffff 100%);
}
.wbe-post__category-container {
display: flex;
gap: 0.5em;
overflow: hidden;
}
.wbe-post__category {
color: white;
background-color: #9f9f9f;
border-radius: 0.15em;
padding: 0 1rem 0 1rem;
}
.wbe-fadeIn {
animation-name: wbe-fadeIn;
animation-duration: 0.8s;
animation-timing-function: ease;
}
.wbe-fadeOut {
animation-name: wbe-fadeOut;
animation-duration: 0.4s;
animation-timing-function: ease;
opacity: 0;
}
.wbe-loading {
opacity: 0;
}
@keyframes wbe-fadeOut {
0% {
opacity: 1;
-webkit-transform: scale(1)
}
1% {
opacity: 0.5;
transform: scale(0.9)
}
100% {
opacity: 0;
-webkit-transform: scale(0.8)
}
}
@keyframes wbe-fadeIn {
0% {
opacity: 0;
-webkit-transform: scale(1)
}
1% {
opacity: 0.2;
transform: scale(0.2)
}
100% {
opacity: 1;
-webkit-transform: scale(1)
}
}
.wbe-radio-toolbar {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-bottom: 1.8em;
column-gap: 0.5em;
}
.wbe-radio-toolbar input[type="radio"] {
display: none;
}
.wbe-radio-toolbar label {
border-color: #ccc;
border-radius: 0.25em;
border-style: solid;
border-width: 0.15em;
padding: 0.25em 1em 0.25em 1em;
font-size: 1.6rem;
cursor: pointer;
}
.wbe-radio-toolbar input[type="radio"]:checked+label {
background-color: #0069ff;
border-color: #0069ff;
color: white;
}