.project-pad {
	padding-block: 40px;
	width: min(1200px, 100% - 2rem);
	margin-inline: auto;
}

.project-content {
	margin-bottom: 40px;
}

ul {
	padding-left: 30px;
	margin-bottom: 20px;
}

li {
	list-style-type: initial;
}

.sub-header .entry-title {
	display: none;
}

.site-inner>.wrap {
	max-width: 100%;
}

/* intro */
.intro {
	background: var(--style-sec);
	padding-block: calc(clamp(1.563rem, 2.17vw + 0.521rem, 3.125rem));
}

.intro-flex {
	display: flex;
	align-items: center;
	gap: 20px 40px;
}

.intro-flex>* {
	width: 50%;
}

.intro-right img {
	width: 100%;
	height: auto;
	max-height: 400px;
	object-fit: contain;
}

.project-title {
	font-size: calc(clamp(1.563rem, 3.906vw - 0.313rem, 2.375rem));
	font-weight: 900;
	text-wrap: balance;
}

@media(max-width: 1024px) {
	.intro-flex {
		flex-wrap: wrap;
	}

	.intro-flex>* {
		width: 100%;
	}

	.project-title, .project-date {
		text-align: center;
	}
}

h1,h2,h3,h4,h5,h6 {
	font-weight: bold;
}

/* gallery */
:root {
  --gallery-columns: 4;
  --gallery-gap: 20px;
}

/* gallery layout */
.gallery .container {
  display: flex;
  gap: var(--gallery-gap);
  flex-wrap: wrap;
}

.lightbox-img-wrap {
  width: calc((100% - var(--gallery-gap) * calc(var(--gallery-columns) - 1)) / var(--gallery-columns));
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.gallery .container img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
}



/* lightbox */
.lightboxpreview {
  transition: all .3s linear;
  padding-top:60%;
  cursor:pointer;
  background-size:cover;
}
   
.lightbox-content {
  max-height:75svh;
  height:75svh;
}

.lightbox-close { 
  cursor:pointer;
  margin-left: auto;
  position:absolute;
  right:-30px;
  top:-30px;
  color:white;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.modalscale {
  transform:scale(0);
  opacity:0;
}

.lightbox-container, .lightbox-btn, .lightbox-image-wrapper, .lightbox-enabled{
  transition:all .4s ease-in-out;
}

.lightbox-enabled:hover {
  transform:scale(1.1)
}

.lightbox-enabled {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  object-fit:cover;
  cursor:pointer;
}

.lightbox-container {
  width:100svw;
  height:100svh;
  position:fixed;
  top:0;
  left:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:rgba(0,0,0,.6);
  z-index:9999;
  opacity:0;
  pointer-events:none;
}

.lightbox-container.active {
  opacity:1;
  pointer-events:all;
}

.lightbox-image-wrapper {
  display:flex;
  transform:scale(0);
  align-items:center;
  justify-content:center;
  max-width:90vw;
  max-height:90vh;
  position:relative;
}

.lightbox-container.active .lightbox-image-wrapper {transform:scale(1);}
.lightbox-btn, .close {
  color:white;
  z-index:9999999;
  cursor:pointer; 
  position:absolute;
  font-size:50px;
}

.lightbox-btn {
	text-shadow: 0 0 30px rgba(0,0,0,.4);
}

.left {left:50px;}
.right {right:50px;}

.close {
  top:50px;
  right:50px;
}

.lightbox-image {
  width:100%;
  max-height:95vh;
  object-fit:cover;
 }

@keyframes slideleft {
  33% {
    transform:translateX(-300px);
    opacity:0;
  }
  
  66% {
    transform:translateX(300px);
    opacity:0;
  }
}


.slideleft {
   animation-name: slideleft;
   animation-duration: .5s; 
   animation-timing-function: ease; 
}

@keyframes slideright {
  33% {
    transform:translateX(300px);
    opacity:0;
  }
  66% {
    transform:translateX(-300px);
    opacity:0;
  }
}


.slideright{
   animation-name: slideright;
   animation-duration: .5s; 
   animation-timing-function: ease; 
}
	

@media(max-width: 1024px) {
  :root {
    --gallery-columns: 3;
  }
}

@media(max-width: 768px) {
  :root {
    --gallery-columns: 2;
  }

  .right, .left {
    bottom: 10px;
  }

  .close {
    top: 10px;
    right: 10px;
  }
}

@media(max-width: 550px) {
  :root {
    --gallery-gap: 10px;
  }
}