<div class="w-full py-40">
	<div class="container">
		<!-- PAGE TITLE SECTION -->
		<div class="flex items-center">
			<h1 class="w-max bg-black text-white my-0 px-40"><?php single_cat_title(); ?></h1>
		</div>
		<!-- PAGE TITLE SECTION END -->


		<!-- PAGE CONTENT SECTION -->
		<div class="w-full pt-40 px-40 px-0-567">
			<div class="flex flex-wrap justify-between">
				<?php if (have_posts()) : while(have_posts()) : the_post(); ?>
					<div class="w-1-2 w-full-1080 flex justify-between flex-column-567 mb-40">
						<div class="w-1-2 w-full-567 pr-10 pr-0-567 mb-20-567">
							<?php if (has_post_thumbnail( $post->ID ) ): ?>
							<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
								<div class="relative">
									<img src="<?php echo $image[0]; ?>" class="w-full h-350 h-300-567 o-fit-cover o-pos-center br-10">
									<div class="w-full h-full absolute top-0 left-0 br-10 b4-white-o-7"></div>
								</div>
							<?php endif; ?>
						</div>
						<div class="w-1-2 w-full-567 pl-10 pl-0-567 pr-40 pr-0-567 flex flex-column justify-between">
							<div class="pb-0">
								<h3 class="text-black my-10"><?php the_title(); ?></h3>
								<p class="fs-20 fs-16-567"></p>
							</div>
							<div class="pb-5">
								<a href="<?php the_permalink(); ?>" class="btn-black">Read full story</a>
							</div>
						</div>
					</div>
				<?php  endwhile; else: ?>
					<h2>No posts yet...</h2>
				<?php endif; ?>
			</div>
		</div>
		<!-- PAGE CONTENT SECTION END -->
	</div>
</div>
