/* You can change this file 
---------------------------
Please use the IDs provided as much as possible
This css file is for everything related to the #gallery section
*/

@media only screen and (min-width: 819px) {
    

#gallery, #short-gallery{
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    border: none;
}  

#gallery img {
    width:  100%;
    height: 40vw;
    object-fit: cover;
}

#gallery #halfblock {
    width: 49.5%;
    height: auto;
    margin: 0px;
    padding: 0;
    border: inherit;
    position: absolute;
    left: 5%;
    bottom: 20%;

}

#gallery #halfblock #inset {
padding: 5%;
width: 90%;
height: auto;
}

#gallery #twothirdsblock #inset button:nth-of-type(1) {
	margin-right:5%;
}

button {
   width: auto;
   height:  auto;
   padding: 2% 5%;
   border:  none; 
}
	
	#gallery button {
	margin-top:5%;}


#gallery #thirdblock {
    width: 32.5%;
    height: auto;
    margin: 0px;
    padding: 0;
    border: inherit;
}

#gallery #quarterblock {
    width: 25% !important;
    height: auto;
    margin: 0px;
    padding: 0;
    border: none;
}

#front .wp-block-image>img {
    width: 100%;
    height: 20vw;
    object-fit: cover;
}

#gallery #twothirdsblock {
	margin:8% 0 14% 0;
}

#short-gallery #twothirdsblock {
	margin:5% 0 5% 0;
}
	
/* wp-block-gallery caption css */
	
    .wp-block-gallery.overlap-caption .wp-element-caption, .wp-block-columns.overlap-caption  .wp-element-caption{
        display: block;
		width:85%!important;
		padding:3%;
		margin-left:auto;
		margin-right:auto;
        text-align: left!important;
        position: relative;
        margin-top: -8%;
        color: white;
		background:black;
		font-size:1vw;
		display:table;
	}
	
	.wp-block-gallery.overlap-caption .wp-element-caption::after, .wp-block-columns.overlap-caption  .wp-element-caption::after{
		content:"+";
		font-size:2vw;
		display:table-cell;
		vertical-align:top;
	} 
	
	.wp-block-gallery.overlap-caption a:has(img), .wp-block-columns.overlap-caption a:has(img){
	width:100%;
	height:100%;}
	
	.wp-block-gallery.overlap-caption:has(.wp-element-caption) figure {
        flex-direction: column;
    }
	
	figure.wp-block-gallery:has(.wp-element-caption) .wp-block-image>img, .wp-block-columns.overlap-caption figure {
        height: 100% !important;
    }
	
.wp-block-columns.overlap-caption figure {
	padding:4%;
	padding-bottom:0!important;
	margin-bottom:0!important;
	}
	
	.wp-block-columns.overlap-caption .wp-block-buttons {
	margin-top:-8%;}
	
	.wp-block-columns.gallery-column {
	overflow:hidden;
	}
	
	.wp-block-columns.gallery-column figure {
	width:100%;
	height:100%;
	}
	
	.wp-block-columns.gallery-column figure img {
		width:100%!important;
		height:50vw;
		z-index:1;
		position:relative;
		filter:brightness(0.9);
		
	}
	
	.wp-block-columns.gallery-column  p {
		position:relative;
		width:90%;
		line-height:1.9vw;
		margin-left:auto;
		margin-right:auto;
		margin-top:-25%;
		z-index:2!important;
		text-transform:uppercase;
		font-size:1.5vw;
	}

button{
	width:20%;
	padding:1vw 0!important;
	text-transform:uppercase;
	font-weight:normal!important;
	font-size:0.9vw!important;
}

.wp-block-button {
	text-transform:uppercase;
	font-weight:normal!important;
	font-size:0.9vw!important;
}
	
#main *:not(.has-text-align-center){
	text-align:left!important;}
	
#main ul {
		padding-left:5%;
		margin-left:auto;
		margin-right:auto;
		width:auto;
	max-width:50vw;
		text-align:left!important;
	}
	
.wp-block-buttons:has(.wp-block-button:nth-of-type(2)) {
	gap:0.5em;}
	
blockquote {
	margin-left:0;}
	
	.wp-block-list.hide-list li {
	list-style-type:none;}
	
/*#main::before {
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background-image:url('assets/Glittery background.png');
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-size:cover;
	z-index:2;	
}*/

}