@charset "utf-8";
/* ------------------------------------------------------------
cagliari-gallery.css | 14.07.2024 : 15.07.2024
Author: Sebastian Saternus | e-mail: s.saternus@gmail.com
------------------------------------------------------------ */

/* -- GALLERY-MODULE -- */
.gallery-module {position:relative;}
.gallery-panel-kawa {
	grid-column:1/3; grid-row:1;
	position:absolute; width:70%; height:100%; top:0; right:0;
	border-radius:50vh 0 0 50vh;
	background:url('../img/bg-kawa.jpg') center center no-repeat; background-size:100% 100%;
	z-index:80;
	}
#gallery-panel-czekolada {background:url('../img/bg-czekolada.jpg') center center no-repeat; background-size:100% 100%;}
#gallery-panel-herbata {background:url('../img/bg-herbata.jpg') center center no-repeat; background-size:100% 100%;}

/* -- GALLERY-PANEL -- */
.gallery-panel {
	display:grid; grid-template-columns:repeat(2, 1fr);
	position:relative; width:100%; height:100vh;
	z-index:81;
	}
.gallery-panel-text {grid-column:1; grid-row:1; margin:16vh 0 0; z-index:89;}
.gallery-panel-foto {grid-column:2; grid-row:1; margin:9vw 9vw 3vw 0;}

.gallery-panel-text .text {padding:2vw; color:rgba(40,20,0,1);}
.gallery-panel-text .text h2 {color:rgba(40,20,0,1);}

/* -- GALLERY -- */
.gallery {
	display:grid; grid-template-columns:repeat(2, 1fr); grid-auto-rows:repeat(2, 1fr);
	width:100%; height:100%;
	}
.gallery-item-1 {grid-column:1; grid-row:1;}
.gallery-item-2 {grid-column:2; grid-row:1;}
.gallery-item-3 {grid-column:1; grid-row:2;}
.gallery-item-4 {grid-column:2; grid-row:2;}

.gallery-foto-1 {position:relative; width:95%; height:95%;}
.gallery-foto-2 {position:relative; width:100%; height:100%;}
.gallery-foto-3 {position:relative; width:100%; height:100%;}
.gallery-foto-4 {position:relative; width:95%; height:95%; margin:5% 0 0 5%;}

.gallery-foto-1,
.gallery-foto-2,
.gallery-foto-3,
.gallery-foto-4 {display:block; border-radius:2.5vh; box-sizing:border-box;}

/* -- GALLERY: STICKY -- */
.gallery-foto-1:hover .sticky-1 {opacity:1;}
.gallery-foto-2:hover .sticky-2 {opacity:1;}
.gallery-foto-3:hover .sticky-3 {opacity:1;}
.gallery-foto-4:hover .sticky-4 {opacity:1;}

.gallery-foto-sticky {
	opacity:0;
	position:absolute; width:100%; height:4vw; line-height:4vw; bottom:0px;
	border-radius:0 0 2.4vh 2.4vh;
	background:rgba(40,20,0,0.8); backdrop-filter: blur(20px);
	font-size:1.4vw;
	transition:0.5s ease-in;
	}
.gallery-foto-sticky span {padding:0 2vw; color:rgba(250,250,250,1);}

.gallery-foto-1:hover .panel-1 {opacity:1;}
.gallery-foto-2:hover .panel-2 {opacity:1;}
.gallery-foto-3:hover .panel-3 {opacity:1;}
.gallery-foto-4:hover .panel-4 {opacity:1;}

/* -- GALLERY: OPIS PRODUKTU -- */
.panel-1 {left:-30vw; top:2vw;}
.panel-2 {left:-50.5vw; top:6vw;}
.panel-3 {left:-30vw; top:-16.5vw;}
.panel-4 {left:-51.5vw; top:-13.5vw;}

.opis-produktu-panel {
	opacity:0; display:block; position:absolute; width:30vw; height:20vw;
	transition:0.5s ease-in;
	}
.opis-produktu {
	display:block; width:28vw; height:30vw;
	border-radius:2.5vh; box-sizing:border-box;
	background:rgba(208,186,156,0.8); backdrop-filter: blur(20px);
	}
.opis-produktu .text {padding:2vw; font-size:1.5vw; line-height:1.9vw;}
.opis-produktu .text h3 {font-weight:bold; font-size:1.6vw; margin:0 0 1vw;}

/* -- FOTO: gallery: INDEX -- */
#gallery-foto-1 {background:url('../img/foto-1.jpg') center center no-repeat; background-size:100% 100%;}
#gallery-foto-2 {background:url('../img/foto-2.jpg') center center no-repeat; background-size:auto 100%;}
#gallery-foto-3 {background:url('../img/foto-3.jpg') center center no-repeat; background-size:auto 100%;}
#gallery-foto-4 {background:url('../img/foto-4.jpg') right center no-repeat; background-size:auto 100%;}

/* -- FOTO: gallery: KAWA -- */
#gallery-foto-kawa-1 {background:url('../shop/_foto-shop/kawa/bottega-del-caffe.jpg') center center no-repeat; background-size:100% 100%;}
#gallery-foto-kawa-2 {background:url('../shop/_foto-shop/kawa/superoro.jpg') center center no-repeat; background-size:100% 100%;}
#gallery-foto-kawa-3 {background:url('../shop/_foto-shop/kawa/espresso-bar.jpg') center center no-repeat; background-size:100% 100%;}
#gallery-foto-kawa-4 {background:url('../shop/_foto-shop/kawa/silver-bar.jpg') right center no-repeat; background-size:100% 100%;}

/* -- FOTO: gallery: CZEKOLADA -- */
#gallery-foto-choc-1 {background:url('../shop/_foto-shop/czekolada/czekolada-tatrzanska.jpg') center center no-repeat; background-size:100% 100%;}
#gallery-foto-choc-2 {background:url('../shop/_foto-shop/czekolada/czekolada-gianduia.jpg') center center no-repeat; background-size:100% 100%;}
#gallery-foto-choc-3 {background:url('../shop/_foto-shop/czekolada/czekolada-biala.jpg') center center no-repeat; background-size:100% 100%;}
#gallery-foto-choc-4 {background:url('../shop/_foto-shop/czekolada/czekolada-rubinowa.jpg') right center no-repeat; background-size:100% 100%;}

/* -- FOTO: gallery: HERBATA -- */
#gallery-foto-tea-1 {background:url('../shop/_foto-shop/herbata/romeo-e-giulietta.jpg') center center no-repeat; background-size:100% 100%;}
#gallery-foto-tea-2 {background:url('../shop/_foto-shop/herbata/samurai.jpg') center center no-repeat; background-size:100% 100%;}
#gallery-foto-tea-3 {background:url('../shop/_foto-shop/herbata/frutti-di-bosco.jpg') center center no-repeat; background-size:100% 100%;}
#gallery-foto-tea-4 {background:url('../shop/_foto-shop/herbata/sogno-damore.jpg') right center no-repeat; background-size:100% 100%;}

@media (min-height:3000px) and (max-height:100vh) {
/* -- GALLERY-PANEL -- */
.gallery-panel {height:70vh; padding:15vh 0;}
}

@media screen and (max-width:999px) {
.gallery-panel-kawa {display:none;}

.gallery-panel {
	grid-template-columns:auto; grid-template-rows:auto;
	height:auto;
	}
.gallery-panel-text {display:none;}
.gallery-panel-foto {grid-column:1; grid-row:1; margin:50px;}

.gallery {grid-template-columns:auto; grid-template-rows:auto auto auto auto;}
.gallery-item-1 {grid-column:1; grid-row:1;}
.gallery-item-2 {grid-column:1; grid-row:2;}
.gallery-item-3 {grid-column:1; grid-row:3;}
.gallery-item-4 {grid-column:1; grid-row:4;}

.gallery-foto-1,
.gallery-foto-2,
.gallery-foto-3,
.gallery-foto-4 {display:block; width:300px; height:300px; margin:0 auto 50px;}

.gallery-foto-sticky {
	opacity:1; height:50px; line-height:50px; bottom:0px;
	}
.gallery-foto-sticky span {padding:0 20px; font-size:1.3rem}

.panel-1 {left:0; top:0;}
.panel-2 {left:0; top:0;}
.panel-3 {left:0; top:0;}
.panel-4 {left:0; top:0;}

.opis-produktu-panel {
	display:none; opacity:1; position:inherit; width:auto; height:auto;
	}
.opis-produktu {
	display:block; width:100vw; height:300px;
	border:3px solid rgba(40,20,0,1); border-radius:14px; box-sizing:border-box;
	background:rgba(40,20,0,0.8); backdrop-filter: blur(20px);
	}
}

@media screen and (max-width:399px) {
.gallery-panel-foto {margin:50px 0;}
}

/* --- cagliari-gallery.css [ 14.07.2024 ] --- */