/* Match Gutenberg editor content width to the frontend */
.editor-styles-wrapper {  --wp--style--global--content-size: 100%; }
.editor-styles-wrapper .wp-block { max-width: 100%; }
.editor-styles-wrapper .wp-block[data-align="wide"] { max-width: 100%; }
.editor-styles-wrapper .wp-block[data-align="full"] { max-width: none; }

/*HERO */
.page-template-default .hero-full { min-height: 400px; }
.hero { padding-top: 100px; }

@media (min-width: 1200px) {
	.hero { padding-top: 149px; }	
}

.home .hero-full { min-height: 645px !important; position: relative; }
.hero > picture, .hero > img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.hero > picture > img, .hero > img { object-fit: cover; object-position: 75% 50%; width: 100%; height: 100%; }

@media screen and (max-width: 767px) {
	.home .hero { min-height: 603px; background-position: 100% 50%; }
	.page-template-default .hero {min-heigh: 400px; }
}

/*Basics */
.ptb-80 {
	padding-block: 80px;
}

.mtb-80 { margin-block: 80px; }

@media (max-width: 768px) {
	.ptb-80 { padding-block: 48px; }
	.mtb-80 { margin-block: 48px; }

}

:root {
	--theme-green: #00A97A;
	--theme-light-yellow: #FFEF9E;
	--theme-bright-yellow: #FFDF3C;
	--purple: #490075;
	--pink: #F8C2D9;
}

.bg-bright-yellow { background-color: #FFDF3C; }
.bg-yellow { background-color: #FFEF9E; }
.bg-purple { background-color: #490075; }
.bg-pink { background-color: #F8C2D9; } 

/*LINKS */
.cta { background-color: var(--pink); color: #000; text-decoration: none; padding: 9px 12px; font-weight: 600; font-size: 0.688rem; text-transform: uppercase; display: inline-table; margin-right: 10px; margin-bottom: 10px; letter-spacing: 0.06875rem; transition: ease-in-out 0.3s; }
.cta-btn-lg { font-size: 0.9rem; font-weight: 600; }
.cta:hover { background-color: var(--purple); color: #fff; }
.bg-bright-yellow .cta, .bg-yellow .cta, .bg-pink .cta, .bg-green .cta { background-color: var(--purple); color: #fff; }
.bg-bright-yellow .cta:hover, .bg-yellow .cta:hover, .bg-pink .cta:hover, .bg-green .cta:hover { background-color: var(--pink); color: #000; }
.bg-bright-yellow h1, .bg-bright-yellow h2, .bg-bright-yellow h3, .bg-bright-yellow h4, .bg-bright-yellow h5, .bg-bright-yellow h6 { color: var(--purple); }

.latest-post .cta { width: fit-content; margin-top: auto; }