/*

    The following CSS codes are created by the YellowPencil plugin.
    https://yellowpencil.waspthemes.com/


    T A B L E   O F   C O N T E N T S
    ........................................................................

    01. Global Styles
    02. Post Template

*/



/*-----------------------------------------------*/
/*  Global Styles                                */
/*-----------------------------------------------*/
body :where(figure){

	margin: 0 0 0;
}

body #portfolio-main-wrapper .breakdance .bde-post-list .ee-post-content{
	margin-bottom: 0;
}

body #wrapper-card, body .bde-post-list article img, body #portfolio-main-wrapper, body .wrapper-grid-3, body .wrapper-grid-2{
	--wrapper-padding: 20px;
	--wrapper-item-corner: 8px;
}

body .wrapper-grid-3, body .wrapper-grid-2, body #portfolio-main-wrapper{
	--items-gap-s: 1em;
	--items-gap-m: 2em;
	--cas-grid-align-items:start;
	--cas-grid-justify-items:start;
}

body .wrapper-grid-3{
	--cas-grid-items-per-row: 3;
	display:-ms-grid;
	display:grid;
	-ms-grid-columns: repeat(var(--cas-grid-items-per-row, 3), minmax(0, 1fr));
	grid-template-columns: repeat(var(--cas-grid-items-per-row, 3), minmax(0, 1fr));
	gap: var(--wrapper-padding);
	text-align: left;
	max-width: 100%!important;
	width: 100%!important;
	position: relative;
	background-size: cover;
	-webkit-box-align: var(--cas-grid-align-items, stretch);
	-ms-flex-align: var(--cas-grid-align-items, stretch);
	align-items: var(--cas-grid-align-items, stretch);
	justify-items: var(--cas-grid-justify-items, stretch);
	margin-top: 2em;
	margin-bottom: 0em;
}

body .wrapper-grid-2{
	--cas-grid-items-per-row: 2;
	display:-ms-grid;
	display:grid;
	-ms-grid-columns: repeat(var(--cas-grid-items-per-row, 2), minmax(0, 1fr));
	grid-template-columns: repeat(var(--cas-grid-items-per-row, 2), minmax(0, 1fr));
	gap: var(--wrapper-padding);
	text-align: left;
	max-width: 100%!important;
	width: 100%!important;
	position: relative;
	background-size: cover;
	-webkit-box-align: var(--cas-grid-align-items, stretch);
	-ms-flex-align: var(--cas-grid-align-items, stretch);
	align-items: var(--cas-grid-align-items, stretch);
	justify-items: var(--cas-grid-justify-items, stretch);
	margin-top: 2em;
	margin-bottom: 0em;
}

body #wrapper-card{
	padding: var(--wrapper-padding);
	border-radius: calc(var(--wrapper-padding)+var(--wrapper-item-corner));
}

body #wrapper-card img, body #wrapper-card button{
	border-radius: var(--wrapper-item-corner);
}

body .bde-post-list article img{
	border-radius: var(--wrapper-item-corner);
	border: 1px solid red;
}

@media (max-width: 1023px){

	body .wrapper-grid-3{
	--cas-grid-items-per-row: 3;
	}

}



@media (max-width: 767px){

	body .wrapper-grid-3, body .wrapper-grid-2{
	--cas-grid-items-per-row: 2;
	}

}



@media (max-width: 600px){

	body .wrapper-grid-3, body .wrapper-grid-2{
	--cas-grid-items-per-row: 1;
	}

}



/*-----------------------------------------------*/
/*  Post Template                                */
/*-----------------------------------------------*/
body.single-post :where(figure){

	margin: 0 0 0;
}

body.single-post #wrapper-card, body.single-post.single-post .bde-rich-text img{
	--wrapper-padding: 20px;
	--wrapper-item-corner: 8px;
}

body.single-post .wrapper-grid-3, body.single-post .wrapper-grid-2{
	--items-gap-s: 1em;
	--items-gap-m: 2em;
	--cas-grid-align-items:start;
	--cas-grid-justify-items:start;
}

body.single-post .wrapper-grid-3{
	--cas-grid-items-per-row: 3;
	display:-ms-grid;
	display:grid;
	-ms-grid-columns: repeat(var(--cas-grid-items-per-row, 4), minmax(0, 1fr));
	grid-template-columns: repeat(var(--cas-grid-items-per-row, 4), minmax(0, 1fr));
	gap: var(--items-gap-s);
	text-align: left;
	max-width: 100%!important;
	width: 100%!important;
	position: relative;
	background-size: cover;
	-webkit-box-align: var(--cas-grid-align-items, stretch);
	-ms-flex-align: var(--cas-grid-align-items, stretch);
	align-items: var(--cas-grid-align-items, stretch);
	justify-items: var(--cas-grid-justify-items, stretch);
	margin-top: 2em;
	margin-bottom: 0em;
}

body.single-post #wrapper-card{
	padding: var(--wrapper-padding);
	border-radius: calc(var(--wrapper-padding)+var(--wrapper-item-corner));
}

body.single-post #wrapper-card img, body.single-post #wrapper-card button{
	border-radius: var(--wrapper-item-corner);
}

body.single-post.single-post .bde-rich-text img{
	border-radius: var(--wrapper-item-corner);
}

@media (max-width: 1023px){

	body.single-post .wrapper-grid-3{
	--cas-grid-items-per-row: 2;
	}

}



@media (max-width: 767px){

	body.single-post .wrapper-grid-3{
	--cas-grid-items-per-row: 1;
	}

}