blog

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Our Story Section</title>
	<style>
		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			padding: 0;
			font-family: 'Georgia', serif;
			background-color: #fdf8f2;
		}

		.circle-section {
			padding: 60px 20px;
			width: 100%;
		}

		.circle-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			gap: 40px;
			width: 100%;
		}

		.circle-item {
			flex: 1 1 220px;
			max-width: 430px;
		}

		.circle-image {
			width: 100%;
			aspect-ratio: 1 / 1;
			border-radius: 50%;
			overflow: hidden;
			margin-bottom: 20px;
			position: relative;
		}

		.circle-image img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
			transition: transform 8s ease;
		}

		.circle-image:hover img {
			transform: scale(1.1);
		}

		.circle-title {
			font-size: 16px;
			letter-spacing: 2px;
			text-transform: uppercase;
			margin-bottom: 10px;
			color: #626664;
		}

		.circle-text {
			font-size: 14px;
			line-height: 1.6;
			color: #626664;
		}

		.circle-text a {
			color: #626664;
			text-decoration: underline;
		}

		@media (max-width: 1024px) {
			.circle-container {
				gap: 30px;
				justify-content: center;
			}
		}

		@media (max-width: 768px) {
			.circle-container {
				flex-direction: row;
				gap: 20px;
			}

			.circle-item {
				max-width: 45%;
			}
		}

		@media (max-width: 480px) {
			.circle-item {
				max-width: 100%;
			}
		}
	</style>
</head>

<body>

	<section class="circle-section">
		<div class="circle-container">

			<div class="circle-item">
				<div class="circle-image">
					<img src="https://cdn.shopify.com/s/files/1/0705/4118/1155/files/OPAL_AURA.png?v=1749901468"
						alt="Our Mission" />
				</div>
				<div class="circle-title">OUR MISSION</div>
				<div class="circle-text">
					We are committed to using traditional manufacturing techniques that focus on slow and sustainable
					production. Read more about this <a href="#">here</a>.
				</div>
			</div>

			<div class="circle-item">
				<div class="circle-image">
					<img src="https://cdn.shopify.com/s/files/1/0705/4118/1155/files/OPAL_AURA.png?v=1749901468"
						alt="Our Ethics" />
				</div>
				<div class="circle-title">OUR ETHICS</div>
				<div class="circle-text">
					We support sustainable production techniques and work with a number of small scale, family run
					factories. Read more about this <a href="#">here</a>.
				</div>
			</div>

			<div class="circle-item">
				<div class="circle-image">
					<img src="https://cdn.shopify.com/s/files/1/0705/4118/1155/files/OPAL_AURA.png?v=1749901468"
						alt="Meet the Maker" />
				</div>
				<div class="circle-title">MEET THE MAKER</div>
				<div class="circle-text">
					Meet some of the wonderful artisans we work with around the globe <a href="#">here</a>.
				</div>
			</div>

			<div class="circle-item">
				<div class="circle-image">
					<img src="https://cdn.shopify.com/s/files/1/0705/4118/1155/files/OPAL_AURA.png?v=1749901468"
						alt="Our Story" />
				</div>
				<div class="circle-title">OUR STORY</div>
				<div class="circle-text">
					Find out a little bit about our story <a href="#">here</a>.
				</div>
			</div>

		</div>
	</section>

</body>

</html>