/home/u336066629/websites/AmAL87tCa/public_html/wp-content/themes/shf/single-board_member.php
<?php
get_header();
if(have_rows('board_content')):
while(have_rows('board_content')): the_row();
$image = get_sub_field('image_board');
$title = get_sub_field('title_board_');
$description = get_sub_field('description_board');
?>
<div class="min-h-screen bg-[#4F0D13]">
<div class="container mx-auto px-4 py-16 md:py-24 lg:py-32">
<div class="absolute left-[3%] top-[4%] md:top-[8%] lg:top-[14%] w-[60px] md:w-[80px] h-[60px] md:h-[80px] rounded-[50%] border-2 border-transparent
[background:linear-gradient(#4F0D13,#4F0D13)_padding-box,linear-gradient(180deg,_#EB212E_38.5%,_#4F0D13_100%)_border-box]
flex items-center justify-center">
<span class="[writing-mode:vertical-lr] relative h-[140px] md:h-[200px] top-[100%] rotate-180 font-maison text-[10px] md:text-[12px] font-normal text-[#fff] text-center flex items-center justify-center">
SUNNY HILL FOUNDATION
</span>
</div>
<div class="max-w-4xl mx-auto text-white">
<div class="flex flex-col md:flex-row items-center md:items-start mb-10 md:mb-10">
<div class="relative w-[150px] md:w-[200px] lg:w-[242px] h-[187px] md:h-[240px] lg:h-[287px] rounded-full border border-transparent
[background:linear-gradient(#4F0D13,#4F0D13)_padding-box,linear-gradient(90deg,_#EB212E_76.07%,_#C91C28_79.07%,_#9E1720_84.09%,_#7B121A_89.1%,_#630F16_93.11%,_#540D13_97.12%,_#4F0D13_100.13%)_border-box]
flex items-center justify-center">
<div class="absolute w-[150px] md:w-[190px] lg:w-[240px] h-[150px] md:h-[190px] lg:h-[228px] rounded-full border border-transparent
[background:linear-gradient(#4F0D13,#4F0D13)_padding-box,linear-gradient(90deg,_#EB212E_76.07%,_#C91C28_79.07%,_#9E1720_84.09%,_#7B121A_89.1%,_#630F16_93.11%,_#540D13_97.12%,_#4F0D13_100.13%)_border-box]
flex items-center justify-center">
<div class="w-32 md:w-36 lg:w-40 h-32 md:h-36 lg:h-40 rounded-full overflow-hidden">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $title; ?>" class="w-full h-full object-cover">
</div>
</div>
</div>
<div class="mt-8 md:mt-24 flex-1 py-3 font-maison z-[1] text-center md:text-left">
<h2 class="text-sm md:text-base lg:text-lg font-semibold flex flex-col md:flex-row items-center">
<span class="text-white hover:text-gray-300"><?php echo $title; ?></span>
<div class="h-[1px] w-16 md:w-24 lg:w-32 mt-2 md:mt-0 [background:linear-gradient(90deg,_#4F0D13_0%,_#540D13_10.67%,_#630F16_23.33%,_#7B121A_30%,_#9E1720_46.67%,_#C91C28_63.33%,_#EB212E_100%)]"></div>
</h2>
<p class="text-xs md:text-sm text-gray-300 leading-snug max-w-[200px] md:max-w-[250px] lg:max-w-[300px] mt-2 mx-auto md:mx-0">
<?php echo $description; ?>
</p>
</div>
</div>
<div class="w-max-w-xl px-4 md:px-8 lg:px-10 mt-8 md:mt-8 md:ml-32">
<div class="prose prose-sm md:prose-base lg:prose-lg prose-invert max-w-none text-center md:text-left">
<?php the_content(); ?>
</div>
</div>
</div>
</div>
</div>
<?php endwhile;
endif;
get_footer(); ?>