.atalag-home-portfolio { padding: 70px 20px 80px; background:#fff; }
.atalag-home-portfolio__inner, .atalag-portfolio-page__inner { width:100%; margin:0 auto; }
.atalag-home-portfolio h2, .atalag-portfolio-page__title {
	margin:0 0 42px; font-family:Verdana,sans-serif; font-size:21px; font-weight:400; color:#333;
}
.atalag-home-portfolio__grid {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-start;
	gap:28px 8px;
}
.atalag-portfolio-card { display:block; width:350px; max-width:100%; color:#333; text-decoration:none; text-align:center; }
.atalag-portfolio-card__media { width:350px; max-width:100%; height:500px; overflow:hidden; background:#f3f3f3; }
.atalag-portfolio-card__image { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.atalag-portfolio-card:hover .atalag-portfolio-card__image { transform:scale(1.015); }
.atalag-portfolio-card__title {
	display:block; padding-top:7px; font-family:Verdana,sans-serif; font-size:13px; line-height:20px; text-transform:uppercase;
}

.atalag-portfolio-page { padding:48px 10px 90px; background:#fff; }
.atalag-portfolio-page__title { margin-left:20px; }
.atalag-portfolio-category { scroll-margin-top:90px; margin:0 0 78px; }
.atalag-portfolio-category h2 {
	margin:0 0 18px 20px; font-family:Verdana,sans-serif; font-size:13px; font-weight:400; line-height:24px; text-transform:uppercase; color:#222;
}
.atalag-portfolio-carousel { position:relative; width:100%; }
.atalag-portfolio-carousel__viewport { overflow:hidden; width:100%; }
.atalag-portfolio-carousel__track {
	display:flex; gap:8px; transition:transform .55s ease; will-change:transform;
}
.atalag-portfolio-carousel__slide {
	flex:0 0 calc((100% - 24px)/4); margin:0; height:355px; overflow:hidden; background:#f3f3f3;
}
.atalag-portfolio-carousel__slide img { display:block; width:100%; height:100%; object-fit:cover; }
.atalag-portfolio-carousel__arrow {
	position:absolute; top:50%; z-index:3; transform:translateY(-50%); width:42px; height:54px; border:0;
	background:rgba(255,255,255,.78); color:#222; font-size:36px; line-height:1; cursor:pointer;
}
.atalag-portfolio-carousel__arrow.is-prev { left:8px; }
.atalag-portfolio-carousel__arrow.is-next { right:8px; }
.atalag-portfolio-carousel__arrow:disabled { opacity:.3; cursor:default; }
.atalag-portfolio-carousel__dots { display:flex; justify-content:center; gap:8px; min-height:10px; margin-top:10px; }
.atalag-portfolio-carousel__dot { width:6px; height:6px; border-radius:50%; background:#ccc; }
.atalag-portfolio-carousel__dot.is-active { background:#222; }

@media(max-width:1024px){
	.atalag-home-portfolio__grid { gap:24px 8px; }
	.atalag-portfolio-carousel__slide { flex-basis:calc((100% - 16px)/3); height:320px; }
}
@media(max-width:767px){
	.atalag-home-portfolio { padding:55px 14px 65px; }
	.atalag-home-portfolio h2 { margin-bottom:28px; font-size:19px; }
	.atalag-home-portfolio__grid { gap:20px 8px; }
	.atalag-portfolio-card { width:calc(50% - 4px); }
	.atalag-portfolio-card__media { width:100%; height:auto; aspect-ratio:7/10; }
	.atalag-portfolio-card__title { font-size:11px; }
	.atalag-portfolio-page { padding:38px 8px 65px; }
	.atalag-portfolio-page__title, .atalag-portfolio-category h2 { margin-left:8px; }
	.atalag-portfolio-carousel__slide { flex-basis:calc((100% - 8px)/2); height:300px; }
}
@media(max-width:480px){
	.atalag-portfolio-carousel__slide { flex-basis:100%; height:360px; }
	.atalag-portfolio-carousel__track { gap:0; }
}
@media(prefers-reduced-motion:reduce){
	.atalag-portfolio-carousel__track,.atalag-portfolio-card__image { transition:none; }
}


/* Homepage portfolio category carousel */
.atalag-home-portfolio__carousel {
	position: relative;
	width: 100%;
}
.atalag-home-portfolio__viewport {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.atalag-home-portfolio__viewport::-webkit-scrollbar { display: none; }
.atalag-home-portfolio__grid {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 8px;
	width: max-content;
}
.atalag-home-portfolio .atalag-portfolio-card {
	flex: 0 0 350px;
	width: 350px;
	max-width: none;
	scroll-snap-align: start;
}
.atalag-home-portfolio__arrow {
	position: absolute;
	top: 250px;
	z-index: 4;
	width: 38px;
	height: 54px;
	padding: 0;
	border: 0;
	background: rgba(255,255,255,.82);
	color: #222;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
}
.atalag-home-portfolio__arrow.is-prev { left: 0; }
.atalag-home-portfolio__arrow.is-next { right: 0; }
.atalag-home-portfolio__arrow:disabled { opacity: .25; cursor: default; }

@media (max-width: 767px) {
	.atalag-home-portfolio__grid { gap: 8px; }
	.atalag-home-portfolio .atalag-portfolio-card {
		flex-basis: calc((100vw - 36px) / 2);
		width: calc((100vw - 36px) / 2);
	}
	.atalag-home-portfolio .atalag-portfolio-card__media {
		width: 100%;
		height: auto;
		aspect-ratio: 7 / 10;
	}
	.atalag-home-portfolio__arrow {
		top: calc((((100vw - 36px) / 2) * 10 / 7) / 2);
		width: 32px;
		height: 48px;
		font-size: 30px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.atalag-home-portfolio__viewport { scroll-behavior: auto; }
}