/*------------------------------------------------
Hero
------------------------------------------------*/
.hero.countries {
    padding-bottom: 0!important;
    background-image: url("https://ahead.africa/wp-content/uploads/2024/10/shapes-tile-light-blue.svg");
}
.hero h1 {
    margin-bottom: 1em;
}
.hero figure {
    max-width: 550px;
    margin: auto;
}

.observation-divider .shape {
    position: absolute;
    right: 0;
    top: 20%;
    translate: 0 -50%;
    max-width: clamp(80px, 10%, 150px);
    z-index: 1;
}

@media screen and (min-width: 550px) {
	.more-activities .wp-block-post-template {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.more-activities .wp-block-post {
		max-width: 360px;
		width: 100%;
	}
}

.more-countries-card {
    padding: 1em !important;
    position: relative;
    isolation: isolate;
    border-radius: var(--border-radius);
    overflow: clip;
	background-color: var(--wp--preset--color--primary-alt) !important;
}
.more-countries-card h3 {
	margin-top: auto !important;
}
@media screen and (max-width: 600px) {
	.more-countries-card h3 {
		font-size: 1.5rem !important;
	}
}
.more-countries-card .wp-block-post-featured-image {
	max-width: 210px;
	margin-bottom: 2rem !important;
	transition: scale 0.25s ease;
}
.more-countries-card:hover .wp-block-post-featured-image {
	scale: 1.05;
}
.more-countries-card .wp-block-post-featured-image img {
	max-height: 200px; 
	object-fit: contain !important;
	object-position: top left;
}
.more-countries-card .shape {
    position: absolute;
    width: fit-content;
    z-index: -1;
    margin: 0;
}
@media screen and (min-width: 600px) {
	.more-countries-card .shape {
		max-width: 120px;
	}
}

.wp-block-post:nth-of-type(4n + 1) .more-countries-card .shape {
    inset: auto auto 0 0;
}
.wp-block-post:nth-of-type(4n + 2) .more-countries-card .shape {
    inset: 0 auto auto 0;
	rotate: 90deg;
}
.wp-block-post:nth-of-type(4n + 3) .more-countries-card .shape {
    inset: auto 0 0 auto;
    rotate: 270deg;
}
.wp-block-post:nth-of-type(4n + 4) .more-countries-card .shape {
    inset: 0 0 auto auto;
    rotate: 180deg;
}