.ofc{
	color:var(--color-text);
	padding-block:var(--space-6) var(--space-12);
}

.ofc *,
.ofc *::before,
.ofc *::after{
	box-sizing:border-box;
}

.ofc-top{
	margin-bottom:var(--space-6);
}

.ofc .ofc-top__title{
	margin:0 0 var(--space-2);
	font-size:var(--font-size-3xl);
	font-weight:var(--font-weight-bold);
	letter-spacing:-.02em;
	line-height:1.15;
	color:var(--color-text);
}

.ofc-top__sub{
	margin:0;
	font-size:var(--font-size-base);
	line-height:var(--line-height-normal);
	color:var(--color-text-secondary);
}

.ofc-top__sub a{
	color:var(--color-secondary);
	text-decoration:underline;
	text-underline-offset:2px;
}

.ofc-top__sub a:hover{
	color:var(--color-secondary-dark);
}

.ofc-grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:var(--space-5);
}

.ofc-card{
	display:flex;
	flex-direction:column;
	overflow:hidden;
	background:var(--color-surface);
	border:1px solid var(--color-border);
	border-radius:var(--radius-lg);
	box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05);
}

.ofc-photo{
	position:relative;
	display:block;
	aspect-ratio:16/10;
	max-width:100%;
	background:var(--color-bg-light-gray);
	cursor:zoom-in;
}

.ofc-photo img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

.ofc-zoom{
	position:absolute;
	right:var(--space-3);
	top:var(--space-3);
	display:flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	border-radius:var(--radius-full);
	background:rgba(0,0,0,.55);
	color:#fff;
	transition:background .15s,transform .15s;
}

.ofc-zoom svg{
	width:20px;
	height:20px;
}

.ofc-photo:hover .ofc-zoom{
	background:rgba(0,0,0,.75);
	transform:scale(1.08);
}

.ofc-photo--empty{
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--color-border-dark);
	cursor:default;
}

.ofc-photo--empty svg{
	width:64px;
	height:64px;
}

.ofc-body{
	display:flex;
	flex:1;
	flex-direction:column;
	gap:var(--space-4);
	padding:var(--space-4) var(--space-4) var(--space-5);
}

.ofc .ofc-name{
	margin:0;
	font-size:var(--font-size-lg);
	font-weight:var(--font-weight-bold);
	line-height:var(--line-height-tight);
	color:var(--color-text);
}

.ofc-facts{
	display:flex;
	flex-direction:column;
	gap:var(--space-3);
	margin:0;
}

.ofc-fact{
	display:flex;
	align-items:flex-start;
	gap:var(--space-3);
	font-size:var(--font-size-base);
	line-height:var(--line-height-normal);
}

.ofc-fact > svg{
	flex-shrink:0;
	width:20px;
	height:20px;
	margin-top:2px;
	color:var(--color-text-secondary);
}

.ofc-fact dt{
	font-size:var(--font-size-xs);
	font-weight:var(--font-weight-semibold);
	letter-spacing:.04em;
	text-transform:uppercase;
	color:var(--color-text-secondary);
}

.ofc-fact dd{
	margin:0;
	overflow-wrap:anywhere;
}

.ofc-note{
	display:block;
	font-size:var(--font-size-sm);
	color:var(--color-text-secondary);
}

.ofc .ofc-map{
	align-self:flex-start;
	margin-top:auto;
	font-weight:var(--font-weight-semibold);
}

.ofc-map svg{
	width:18px;
	height:18px;
}

@media (max-width:1100px){
	.ofc-grid{
		grid-template-columns:repeat(3,minmax(0,1fr));
	}
}

@media (max-width:840px){
	.ofc-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:var(--space-4);
	}

	.ofc .ofc-top__title{
		font-size:var(--font-size-2xl);
	}
}

@media (max-width:560px){
	.ofc-grid{
		grid-template-columns:minmax(0,1fr);
	}
}