.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;
}