/* @font-face {
  font-family: "Oswald", sans-serif;
  src: url("../fonts/oswald-variable-font.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
} */


:root{
	--primary-color: #F5C518;
	--text-dark: #083049;
	--heading-color: #122A43;
}

button{background: transparent; border: 0;}

.oswald{font-family: "Oswald", sans-serif;}
.inter{font-family: "Inter", sans-serif;}
.intelOneMono{font-family: "Intel One Mono", monospace;}

.lh-2{line-height: 2;}
.lh-normal{line-height: normal;}

.text-primary{color: var(--primary-color)!important;}
.text-dark-1{color: var(--text-dark)!important;}
.text-grey-1{color: #5B6066!important;}
.text-grey-2{color: rgba(255, 255, 255, 0.7)!important;}

.bg-dark{background-color: #2C2C2C!important;}
.bg-gradient-1{background: radial-gradient(44.48% 46.54% at 50% 60.15%, #122A43 0%, #2C2C2C 100%);}

.fs-lg{font-size: 1.3rem!important;}
.fs-md{font-size: 1.1rem!important;}
.fs-sm{font-size: 0.9rem!important;}
.fs-xs{font-size: 0.8rem!important;}

.heading{font-size: clamp(25px, 3vw, 45px); color: var(--heading-color);}
.sub-title{display: inline-block; color: var(--heading-color)!important; background-color: var(--primary-color); padding: 7px 20px; border-radius: 90px;}

.heading + .h-line{width: 70px; background-color: var(--primary-color); height: 4px;}

.play-text{font-family: "Playfair Display", serif; font-style: italic; font-weight: 400;}

/* btn */
.btn{font-size: 0.9rem; position: relative; padding: 0.8rem 1.6rem 0.8rem 1.1rem; background-color: #ECF3F8; font-weight: 500; border-radius: 20px; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow: hidden; z-index: 1;}
.btn .icon{position: relative; color:#fff; font-size: 0.9rem; position: relative; margin-left: 8px; top: -1px; right: -6px;}
.btn .icon::after{content: ""; width: 33px; height: 33px; border-radius: 12px; background-color: var(--primary-color); position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%) scale(1); z-index: -1; transition: all 0.3s ease-in-out;}
.btn .icon .arrow{transform: rotate(-45deg) translateY(-1px) translateX(1px);}
.btn:hover{color:#000; background-color: var(--primary-color); border-color: var(--primary-color); transition-delay: 0.1s;}
.btn:hover .icon::after{transform: translate(-50%, -50%) scale(1.5);}
.btn:active, .btn:focus{border-color: transparent;}

.btn-inline{display: inline-block; border-bottom: 1px solid transparent; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.btn-inline .icon{width: 20px;}
.btn-inline:hover{border-color: var(--primary-color);}
/*  */
.btn-inline.bordered{font-size: 0.9rem; color: var(--heading-color); border-bottom-color: var(--primary-color);}
/* .btn-line img{-webkit-filter: invert(1); filter: invert(1);} */

/*  */
.btn.btn-style-1{color: #fff; display: inline-flex; column-gap: 5px; background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 8px 16px;}
.btn.btn-style-1 .arrow{transform: rotate(-5deg);}

/*  */
.about-section{position: relative;}
/* .about-section .txt{position: absolute; left: 0; bottom: -60px; color: rgba(0, 0, 0, 0.06); font-size: clamp(50px, 8vw, 120px);} */

/* tab-design-1 */
.tab-design-1 > .nav-tabs{border-bottom: 1px solid #555F69;}
.tab-design-1 > .nav-tabs .nav-link{cursor: pointer; font-family: "Inter", sans-serif; color: rgba(255, 255, 255, 0.8); font-size: clamp(20px, 1.8vw, 32px); font-weight: 400; text-transform: uppercase; background: transparent; border: none; border-bottom: 2px solid transparent;}
.tab-design-1 > .nav-tabs .nav-link.active{color: rgba(255, 255, 255, 1); font-weight: 700; border-bottom: 2px solid #ffffff;}
/*  */
.vertical-tab-design .nav{border-left: 2px solid #D8DFE4;}
.vertical-tab-design .nav-link{position: relative; cursor: pointer; font-family: "Inter", sans-serif; color: rgba(255, 255, 255, 0.8); font-size: clamp(18px, 1.6vw, 30px); padding: 1.4rem 0.5rem 1.4rem 2.5rem;}
.vertical-tab-design .nav-link.active{color: #F6C23E; font-weight: 600;}
.vertical-tab-design .nav-link::before{content: ""; position: absolute; background-color: #ffffff; left: -4px; top: 50%; transform: translateY(-50%); height: 90%; width: 6px; opacity: 0; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.vertical-tab-design .nav-link.active::before{opacity: 1;}
.vertical-tab-design .tab-content figure{color: #555F69; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.vertical-tab-design .tab-content figure *{transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.vertical-tab-design .tab-content figure .image{width: 100%; min-height: 320px; overflow: hidden;}
.vertical-tab-design .tab-content figure .image img{transform: scale(1);}
.vertical-tab-design .tab-content figcaption{background-color: #F2F2F2; padding: 1.5rem 1.5rem;}
.vertical-tab-design .tab-content figcaption .title{font-size: clamp(18px, 1.6vw, 25px); }
.vertical-tab-design .tab-content figure:hover .image img{transform: scale(1.02);}

/* column-block-1 */
/* .column-block-1 ul li{position: relative; font-size: 0.9rem;}
.column-block-1 ul li + li{margin-top: 35px;}
.column-block-1 ul li .icon{width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0.2); border-radius: 10px;}
.column-block-1 ul li .title{color: var(--heading-color); font-size: 1.2rem;} */
/* column-block-wrapper */
.column-block-wrapper .column{position: relative; color: #555F69; padding-block: 1rem;}
.column-block-wrapper .column::after{content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); background-color: var(--primary-color); width: 40px; height: 4px; opacity: 0; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.column-block-wrapper .column:not(:last-child){border-right: 1px solid #D8DFE4;}
.column-block-wrapper .column .icon{display: inline-block; width: 55px; height: 55px; padding: 0.3rem; background-color: #fff; border-radius: 10px;}
.column-block-wrapper .column .title{font-size: clamp(18px, 1vw, 20px); color: var(--heading-color); letter-spacing: 2px;}
.column-block-wrapper .column:hover::after{opacity: 1; bottom: 0px;}
.column-block-wrapper .column:hover .icon{box-shadow: 0 2px 6px -4px #d3d3d3; border-radius: 10px;}


/* -- Faqs --*/
.faq-wrap .accordion-item {background: #fff; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0px;}
.faq-wrap .accordion-item .accordion-button{color: var(--heading-color); background-color: transparent; padding: 1.4rem 2.4rem 1.4rem 1.8rem; box-shadow: none; cursor: pointer;}
.faq-wrap .accordion-item .accordion-body{padding: 0rem 0.2rem 1.4rem 1.8rem;}
.faq-wrap .accordion-item .accordion-button::after,
.faq-wrap .accordion-item .accordion-button:not(.collapsed)::after{content: "+"; font-weight: 500; width: 30px; height: 30px; font-size: 1.4rem; line-height: 1; border-radius: 100%; border: 1px solid rgba(0, 0, 0, 0.08); background: #fff; text-align: center;
  line-height: 24px; position: absolute; top: 15px; right: 5px;}
.faq-wrap .accordion-item .accordion-button:not(.collapsed)::after{content: "-"; color: var(--heading-color); transform: rotate(0); background: var(--primary-color); border-color: var(--primary-color);}
.faq-wrap .accordion-item .accordion-button .number{font-family: "Oswald", sans-serif; color: #E0B415; position: absolute; top: 1.35rem; left: 0.2rem; font-weight: 600; font-size: 1.05rem;}


/* -- footer -- */
footer{background: url(../images/bg/bg-pattern-1.svg) repeat-x center / cover, #151515; padding: 70px 0 80px;}
footer *, footer a:not(:hover){color: #A7ABAF;}
footer .container{max-width: 1380px;}
footer .copyright{border-top: 1px solid rgba(242, 242, 242, 0.2);}
footer .column-title{letter-spacing: 0.3px; display: inline-block; color: #fff; font-weight: 500; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1.5px solid var(--primary-color);}
/*  */
footer .link-list-style li{position: relative; padding-left: 20px; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
footer .link-list-style li + li{margin-top: 18px;}
footer .link-list-style li::before{content: "\f0d7"; font-family: "Font Awesome 6 Free"; font-weight: 600; position: absolute; top: 0; left: 0; transform: rotate(-90deg); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
footer .link-list-style li:hover{color: var(--primary-color);}
footer .link-list-style li:hover::before{left: 4px;}
/*  */
footer .info-list-style li{position: relative; padding-left: 30px;}
footer .info-list-style li + li{margin-top: 14px;}
footer .info-list-style li .icon{position: absolute; top: 0; left: 0; width: 22px;}

/*  */
.pg-hero {position: relative; padding: 280px 0 80px; z-index: 1;}
.pg-hero.overlay::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: -1;}
/* .pg-hero.bg-img{} */
.pg-hero .title{font-size: clamp(20px, 3.5vw, 55px);}
.pg-hero .title::first-letter{font-size: clamp(30px, 5vw, 80px); color: var(--primary-color);}
.breadcrumb .breadcrumb-item{letter-spacing: 0.6px;}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before{color: var(--primary-color);}

/* service-design-1 */
.service-design-1{position: relative; padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.service-design-1 *{transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.service-design-1::before{content: ""; width: 2px; height: 90%; position: absolute; top: 50%; left: 0; background: linear-gradient(180deg, #F5C518 0%, #1879EA 100%); transform: translateY(-50%); opacity: 0; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.service-design-1 .number{color: rgba(255, 255, 255, 0.3);}
.service-design-1 p{color: rgba(255, 255, 255, 0.62);}
.service-design-1 .heading-column{display: flex; column-gap: 15px;}
.service-design-1 .heading-column .number{color: rgba(255, 255, 255, 0.3); flex: 0 0 auto; margin-top: 10px;}
.service-design-1 .title{font-size: clamp(20px, 2.5vw, 40px); background: linear-gradient(180deg, #fff 0%, #fff 100%); background: -webkit-linear-gradient(180deg, #fff 0%, #fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.service-design-1 figure{position: relative; overflow: hidden;}
.service-design-1 figure::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); opacity: 1; z-index: 1; transition: all 0.4s;}
.service-design-1:hover::before{height: 100%; opacity: 1;}
.service-design-1:hover p{color: rgba(255, 255, 255, 0.8);}
.service-design-1:hover figure::before{opacity: 0;}
.service-design-1:nth-child(even){background-color: rgba(255, 255, 255, 0.04); border-top-color: rgba(51, 51, 51, 1);}
.service-design-1:hover .btn.btn-style-1{background-color: rgba(245, 197, 24, 0.1);}
.service-design-1:hover .title{background: -webkit-linear-gradient(180deg, #F5C518 0%, #1879EA 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

/* modal */
.modal .modal-dialog .modal-content{background: url(../images/bg/popup-bg-img.webp) no-repeat center / cover, #151515; border: none; border-radius: 0;}
.modal .modal-header{position: relative; display: block; border-bottom: none;}
.modal .modal-header p{color: rgba(255, 255, 255, 0.8);}
.modal .modal-title{font-size: clamp(18px, 1.6vw, 25px);}
.modal .modal-header .btn-close{position: absolute; top: 7px; right: 18px; opacity: 1; color: #fff; background: transparent; font-size: 1.4rem;}
.modal .modal-header .btn-close:hover{color: var(--primary-color);}
.modal .form-label:has( + .form-control:required)::after,
.modal .form-label:has( + .form-select:required)::after{content: "*"; color: #D63637; position: absolute;}
.modal .form-label{position: relative;}
.modal .form-label span{color: rgba(255, 255, 255, 0.7);}
.modal .form-control, .modal .form-select{position: relative; padding: 4px 18px 10px 4px; background-color: transparent; border: none; border-bottom: 1px solid #fff; border-radius: 0;}
.modal .form-control:focus, .modal .form-select:focus, .modal .modal-header .btn-close:focus{box-shadow: none;}
.modal .select-option .arrow{position: absolute; top: 37px; right: 13px; z-index: 1;}

/* service-why-choose */
.service-why-choose figure{margin-right: -350px;}

.list-style-icon li{position: relative; padding-left: 35px;}
.list-style-icon li + li{margin-top: 22px;}
.list-style-icon li .icon{position: absolute; top: -1px; left: 0;}
.list-style-icon li .icon img{width: 24px;}

/*  */
.tab-design-2 .tabs-wrapper{display:flex; gap: 16px; border-bottom: 1px solid #555F69;}
.tab-design-2 .tabs-wrapper *{transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.tab-design-2 .tabs-scroll{flex:1; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;}
.tab-design-2 .tabs-scroll::-webkit-scrollbar{display:none;}
.tab-design-2 .tab-buttons{display:flex; gap: 12px; flex-shrink:0;}
.tab-design-2 .tab-buttons button{background: rgba(255, 255, 255, 0.5); width: 45px; height: 45px; display: inline-flex; justify-content: center; align-items: center;}
.tab-design-2 .tab-buttons button:hover{background: rgba(255, 255, 255, 1);}
.tab-design-2 .tab-buttons button:not(:hover) img{filter: contrast(0) brightness(300%);}
.tab-design-2 .nav-tabs{flex-wrap: nowrap; overflow-x:auto; white-space:nowrap;}
.tab-design-2 .nav-tabs::-webkit-scrollbar{display:none;}
.tab-design-2 .nav-link{color:#bbb; text-transform: uppercase; border:none !important; background:none !important; position:relative; padding:15px 20px;}
.tab-design-2 .nav-link.active{color:#fff;}
.tab-design-2 .nav-link.active::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#fff;}
.tab-design-2 .image-box{background: rgba(255, 255, 255, 0.4); width: 460px; min-height: 305px; position: relative; z-index: 1; box-shadow: 65px 65px 0px -20px rgba(245, 197, 24, 0.2);}
/* .tab-design-2 .image-box::after{content: ""; width: calc(50% - 20px); height: 50%; background: rgba(245, 197, 24, 0.2); position: absolute; bottom: 40px; right: -20px; z-index: -1;} */





















/* -----------****---------- */
.project {padding: 1rem; max-width: 1000px; margin: 20vh auto; display: grid; grid-column-gap: 7vw; grid-row-gap: 0.5rem;}

.project--intro {grid-template-columns: 1fr; grid-template-areas: 'label-name' 'name' 'label-date' 'date' 'title' 'label-mission' 'mission';}

.project--details {grid-template-areas: 'label-default' 'paragraph'; grid-template-columns: 1fr;}

.project--left {justify-content: start;}

.project--right {justify-content: end;}

.project--details p {grid-area: paragraph; max-width: 400px;}

.project__label--default {grid-area: label-default;}

.project p {
	line-height: 1.4;
	margin: 0;
}

.project__label--name {
	grid-area: label-name;
}

.project__label--date {
	grid-area: label-date;
}

.project__label--mission {
	grid-area: label-mission;
}

.project__name {
	grid-area: name;
}

.project__date {
	grid-area: date;
}

.project__mission {
	grid-area: mission;
	line-height: 1.4;
}

.project__mission p:first-child {
	grid-area: p1;
}

.project__mission p:child {
	grid-area: p2;
}

.project__title {
	grid-area: title;
	font-size: clamp(2rem, 13vw, 8rem);
	font-weight: 400;
	margin: 10vh 0;
	line-height: 1;
}

.project__heading {
	font-weight: inherit;
	font-size: inherit;
	margin: 0;
}

.gallery-wrap {
	position: relative;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.gallery-wrap--auto {
	height: auto;
}

.gallery-wrap--large {
	height: 110vh;
}

.gallery-wrap--dense {
	margin: 0;
}

.gallery {
	position: relative;
	width: 100%;
	height: 100%;	
	flex: none;
}

.gallery--breakout {
	width: min-content;
}

.gallery__item {
	background-position: 50% 50%;
	background-size: cover;	
	border-radius: 10px;
	position: relative;
}

.gallery__item-cut { 
	overflow: hidden;
	display: grid;
	place-items: center;
}

.gallery__item-inner {
	width: 100%; 
	height: 100%;
	background-position: 50% 50%;
	background-size: cover;	
	background-repeat: no-repeat;
}

/* .caption {
	font-size: clamp(1rem, 3vw, 1.75rem);
	z-index: 101;
	font-weight: 400;
} */

.gallery--row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	--size-factor: 1.25;
	--item-height: 20vh;
}

.gallery--row .gallery__item {
	width: auto;
	aspect-ratio: 2 / 3;
}

.gallery--row .gallery__item--s {
	height: var(--item-height);
}

.gallery--row .gallery__item--m {
	height: calc(var(--size-factor) * var(--item-height));
}

.gallery--row .gallery__item--l {
	height: calc(var(--size-factor) * 2 * var(--item-height));
}

.gallery--row .gallery__item--xl {
	z-index: 100;
	height: calc(var(--size-factor) * 3 * var(--item-height));
}

.gallery--switch.gallery--row .gallery__item--m,
.gallery--switch.gallery--row .gallery__item--l {
	height: var(--item-height);
}

.gallery--row .caption {
	position: absolute;
	width: 100%;
	height: auto;
	bottom: -50vh;
	left: 0;
	padding: 4.5vw;
	max-width: 730px;
	opacity: 0;
}

.gallery--switch.gallery--row .caption {
	bottom: 0;
	opacity: 1;
}

.gallery--one {
	display: grid;
	place-items: center;
}

.gallery--one .gallery__item {
	width: 400%;
	height: 400%;
	filter: brightness(1) hue-rotate(90deg);
}

.gallery--switch.gallery--one .gallery__item {
	width: 100%;
	height: 100%;
	filter: brightness(0.7) hue-rotate(0deg);
}

.gallery--one .caption {
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 50%;
	left: 50%;
	margin: 100vh 0 0 -50vw;
	font-size: clamp(2rem,5vw,3rem);
	display: grid;
	place-items: center;
}

.gallery--switch.gallery--one .caption {
	margin-top: -50vh;
}

.gallery--grid {
	height: auto;
	display: grid;
	grid-template-columns: repeat(3,auto);
	grid-template-rows: repeat(3,auto);
	row-gap: 2.5vw;
	column-gap: 3vw;
}

.gallery--grid .gallery__item {
	height: 33vh;
	width: 33vw;
}

.gallery--switch.gallery--grid {
	gap: 0;
}

.gallery--switch.gallery--grid .gallery__item {
	height: 110vh;
	width: 110vw;
	filter: brightness(0.65);
}

.gallery--grid .caption {
	position: absolute;
	width: 100vw;
	height: 100vh;
	padding: 0;
	top: 50%;
	left: 50%;
	margin-top: 50vh;
	margin-left: -50vw;
	display: grid;
	place-items: center;
	max-width: none;
	opacity: 0;
}

.gallery--switch.gallery--grid .caption {
	margin-top: -40vh;
	opacity: 1;
}

.gallery--grid .caption p {
	padding: 50vh 30vw 10vh 10vw;
}

.gallery--switch.gallery--grid .caption p {
	margin-top: 0;
}

.gallery--stack {
	display: grid;
	grid-template-columns: repeat(6,1fr);
	align-items: center;
	justify-content: start;
	gap: 2rem;
	padding: 2rem;
	--offset: 1rem;
}

.gallery--stack .gallery__item {
	width: 25vw;
	z-index: 1;
}

.gallery--stack-glass .gallery__item {
	filter: opacity(1);
}

.gallery--switch.gallery--stack .gallery__item {
	grid-area: 1 / 1 / 2 / 2;
}

.gallery--stack .caption {
	position: absolute;
	bottom: 0;
	left: 100vw;
	width: 100vw;
	padding: 5vw;
	opacity: 0;
	z-index: 0;
}

.gallery--switch.gallery--stack .caption {
	left: 0;
	opacity: 1;
}

.gallery--stack-inverse .gallery__item:nth-child(5) {
	z-index: 2;
}
.gallery--stack-inverse .gallery__item:nth-child(4) {
	z-index: 3;
}
.gallery--stack-inverse .gallery__item:nth-child(3) {
	z-index: 4;
}
.gallery--stack-inverse .gallery__item:nth-child(2) {
	z-index: 5;
}
.gallery--stack-inverse .gallery__item:nth-child(1) {
	z-index: 6;
}

.gallery--switch.gallery--stack .gallery__item:nth-child(2) {
	margin-left: var(--offset);
}

.gallery--switch.gallery--stack .gallery__item:nth-child(3) {
	margin-left: calc(var(--offset) * 2);
}

.gallery--switch.gallery--stack .gallery__item:nth-child(4) {
	margin-left: calc(var(--offset) * 3);
}

.gallery--switch.gallery--stack .gallery__item:nth-child(5) {
	margin-left: calc(var(--offset) * 4);
}

.gallery--switch.gallery--stack .gallery__item:nth-child(6) {
	margin-left: calc(var(--offset) * 5);
}

.gallery--switch.gallery--stack-dark .gallery__item:nth-child(2) {
	filter: brightness(0.8);
}

.gallery--switch.gallery--stack-dark .gallery__item:nth-child(3) {
	filter: brightness(0.7);
}

.gallery--switch.gallery--stack-dark .gallery__item:nth-child(4) {
	filter: brightness(0.6);
}

.gallery--switch.gallery--stack-dark .gallery__item:nth-child(5) {
	filter: brightness(0.5);
}

.gallery--switch.gallery--stack-dark .gallery__item:nth-child(6) {
	filter: brightness(0.4);
}

.gallery--switch.gallery--stack-glass .gallery__item {
	opacity: 0.7;
}

.gallery--switch.gallery--stack-scale .gallery__item:nth-child(2) {
	transform: scale(0.98);
}

.gallery--switch.gallery--stack-scale .gallery__item:nth-child(3) {
	transform: scale(0.96);
}

.gallery--switch.gallery--stack-scale .gallery__item:nth-child(4) {
	transform: scale(0.94);
}

.gallery--switch.gallery--stack-scale .gallery__item:nth-child(5) {
	transform: scale(0.92);
}

.gallery--switch.gallery--stack-scale .gallery__item:nth-child(6) {
	transform: scale(0.9);
}

.gallery--gridtiny {
	display: grid;
	grid-template-columns: repeat(10,1fr);
	width: 300%;
	padding: 0 2vh;
	height: min-content;
	gap: 1vh;
}

.gallery--switch.gallery--gridtiny {
	width: 100%;
	gap: 2vh;
}

.gallery--gridtiny .gallery__item {
	aspect-ratio: 1;
	width: 100%;
	height: auto;
	filter: contrast(0.8) saturate(0) brightness(0.6) opacity(1);
}

.gallery--switch.gallery--gridtiny .gallery__item {
	filter: contrast(1) saturate(1) brightness(0.8) opacity(0.8);
}

.gallery--gridtiny .caption {
	position: absolute;
	width: 100vw;
	height: 100vh;
	left: 50%;
	top: 50%;
	margin: -50vh 0 0 -50vw;
	display: grid;
	place-items: center;
	font-size: clamp(2rem, 8vw, 4rem);
	opacity: 0;
}

.gallery--switch.gallery--gridtiny .caption {
	opacity: 1;
}

.gallery--switch .gallery__item--center {
	height: 100vh;
	width: 100vw;
	aspect-ratio: auto;
	filter: brightness(0.5);
}

.gallery--bento {
	display: grid;
	gap: 1vh;
	grid-template-columns: repeat(3, 32.5vw);
	grid-template-rows: repeat(4,23vh);
	justify-content: center;
    align-content: center;
}

.gallery--switch.gallery--bento {
	grid-template-columns: repeat(3, 100vw);
	grid-template-rows: repeat(4,49.5vh);
	gap: 15vh;
}

.gallery--bento .gallery__item:nth-child(1) {
	grid-area: 1 / 1 / 3 / 2;
}

.gallery--bento .gallery__item:nth-child(2) {
	grid-area: 1 / 2 / 2 / 3;
}

.gallery--bento .gallery__item:nth-child(3) {
	grid-area: 2 / 2 / 4 / 3;
}

.gallery--bento .gallery__item:nth-child(4) {
	grid-area: 1 / 3 / 3 / 3;
}

.gallery--bento .gallery__item:nth-child(5) {
	grid-area: 3 / 1 / 3 / 2;
}

.gallery--bento .gallery__item:nth-child(6) {
	grid-area: 3 / 3 / 5 / 4;
}

.gallery--bento .gallery__item:nth-child(7) {
	grid-area: 4 / 1 / 5 / 2;
}

.gallery--bento .gallery__item:nth-child(8) {
	grid-area: 4 / 2 / 5 / 3;
}

.gallery--bento .caption {
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 50%;
	left: 50%;
	margin: 100vh 0 0 -50vw;
	font-size: clamp(2rem,10vw,5rem);
	display: grid;
	place-items: center;
}

.gallery--switch.gallery--bento .caption {
	margin-top: -50vh;
}

.gallery--grid10 {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 2vw;
}

.gallery--switch.gallery--grid10 {
	grid-template-columns: 1fr 300px 1fr;
	grid-template-rows: 1fr 60vh 1fr;
	grid-gap: 0;
}

.gallery--switch.gallery--grid10 .gallery__item {
	grid-area: 2 / 2 / 3 / 3; 	
}

.gallery--grid10 .caption {
    position: absolute;
	width: 100vw;
	height: 100vh;
	top: 50%;
	left: 50%;
	margin: 100vh 0 0 -50vw;
	display: grid;
	place-items: center;
    font-size: clamp(2rem, 8vw, 6rem);
}

.gallery--switch.gallery--grid10 .caption {
	opacity: 1;
	margin-top: -50vh;
}

@media screen and (min-width: 53em) {
	.frame {
		grid-template-columns: auto auto auto 1fr;
		grid-template-areas: 'title prev ... sponsor';
		align-content: space-between;
		justify-items: start;
		grid-gap: 2rem;
	}
	.frame__demos {
		justify-self: end;
	}
	.project--intro {
		grid-template-columns: auto 1fr;
		grid-template-areas: 'label-name name' 
							 'label-date date'
							 'title title'
							 'label-mission mission';
		
	}

	.project--details {
		grid-template-areas: 'label-default paragraph';
		grid-template-columns: auto auto;
	}
	.project__label {
		text-align: right;
	}
	.project__mission {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		grid-template-areas: 'p1 ...' '... p2';
		column-gap: 2rem;
	}
	.gallery--grid10 {
		grid-template-columns: repeat(10,1fr);
		grid-template-rows: repeat(4,1fr);
	}
	.gallery--grid10:not(.gallery--switch) .pos-1 { grid-area: 1 / 1; }
	.gallery--grid10:not(.gallery--switch) .pos-2 { grid-area: 1 / 2; }
	.gallery--grid10:not(.gallery--switch) .pos-3 { grid-area: 1 / 4; }
	.gallery--grid10:not(.gallery--switch) .pos-4 { grid-area: 1 / 5; }
	.gallery--grid10:not(.gallery--switch) .pos-5 { grid-area: 3 / 6; }
	.gallery--grid10:not(.gallery--switch) .pos-6 { grid-area: 1 / 7; }
	.gallery--grid10:not(.gallery--switch) .pos-7 { grid-area: 1 / 9; }
	.gallery--grid10:not(.gallery--switch) .pos-8 { grid-area: 3 / 10; }
	.gallery--grid10:not(.gallery--switch) .pos-9 { grid-area: 2 / 8; }
	.gallery--grid10:not(.gallery--switch) .pos-10 { grid-area: 4 / 9; }
	.gallery--grid10:not(.gallery--switch) .pos-11 { grid-area: 3 / 8; }
	.gallery--grid10:not(.gallery--switch) .pos-12 { grid-area: 2 / 2; }
	.gallery--grid10:not(.gallery--switch) .pos-13 { grid-area: 3 / 1; }
	.gallery--grid10:not(.gallery--switch) .pos-14 { grid-area: 3 / 4; }
	.gallery--grid10:not(.gallery--switch) .pos-15 { grid-area: 4 / 3; }
	.gallery--grid10:not(.gallery--switch) .pos-16 { grid-area: 4 / 7; }

	.gallery--stack .caption {
		bottom: 0;
		width: 60vw;
		max-width: 800px;
		transform: translateY(50%);
	}

	.gallery--switch.gallery--stack .caption {
		left: 40vw;
	}

	body #cdawrap {
	    justify-self: end;
	}
}