:root {
	--custom-max-width: 100%;
}

body {
	padding: 0;
	margin: 0;
}

#layout { 
    display: grid; 
    grid-template-columns:  1fr;
    grid-template-rows: 1fr;
    gap: 0;
    grid-template-areas: 'header header header'
    					 'main main main'
                         'footer footer footer'
                         'copyright copyright copyright'; 
}

#header {
	grid-area: header;
}

#main { 
	grid-area: main;
	margin: 160px auto 0;
	width: 100%;
	min-height: 600px;
}

#main .main-carousel {
	height: calc(100vh - 160px);
}

#main .main-carousel .carousel-cell {
  	width: 100%;
  	margin-right: 0;
  	height: calc(100vh - 160px);
}

#main .main-carousel .carousel-cell img {
	width: 100%;
	/*margin-top: -160px;*/
	object-fit: cover;
}

#main .content-photo {
	position: relative;
}
	
#main .content-photo img {
	width: 100%;
	height: 400px;
	object-fit: cover;
}

#main .info-box {
	position: absolute;
	left: 83px;
	bottom: 85px;
	width: 40%;
}

#main .title-box {
	position: absolute;
	left: 83px;
	bottom: 40px;
	width: fit-content;
}

#main .container {
	margin: 80px;
	width: calc(100% - 160px);
}

#main .grid { 
	/*grid-area: content;*/
	display: grid;
	grid-template-columns: repeat(3, 1fr);
  	grid-template-rows: auto; 
	column-gap: 1%;
	row-gap: 55px;
	justify-items: stretch;
	justify-content: space-around;
	max-width: inherit;
}

#main .events {
	position: relative;
}

#main .equipe {
	position: relative;
}

#main .equipe-box {
	position: absolute;
	left: 20px;
	bottom: 20px;
	width: 70%;
}

#main .albums { 
	/*grid-area: content;*/
	display: grid;
	grid-template-columns: repeat(4, 1fr);
  	grid-template-rows: auto; 
	gap: 10px;
	justify-items: stretch;
	justify-content: space-around;
	max-width: inherit;
}

#main .albums .block {
	position: relative;
}

#main .albums img {
	display: block;
}

#main .links {
	position: relative;
	width: 100%;
}

#main .links a { 
	display: block;
	width: 100%;
}

#main .accordions {
	position: relative;
	width: 100%;
}

#main .accordions a { 
	display: block;
	width: 100%;
}

#footer { 
	grid-area: footer;
	display: grid;
	grid-template-columns: 35% 36% 29%;
	grid-template-rows: auto; 
	justify-items: stretch;
	justify-content: space-around;
	padding: 50px 0;
	max-width: 100%;
}

#footer div {
	margin: 0;
	padding: 0 100px;
}

/*
@media only screen and (max-width: 1599px) {
	#content .grid { 
	    grid-template-columns: 30% 30% 30%;
	}
}

@media only screen and (max-width: 1399px) {
	
	:root {
		--custom-max-width: 90%;
	}

	#content .title .center {
		width: 50%;
	}
		
	#content .title .left, .title .right {
		width: 25%;
	}

}

@media only screen and (max-width: 1250px) {

	@media only screen and (max-width: 1599px) {
	    #content .grid { 
	        grid-template-columns: 45% 45%;
	    }
	}

    #content {
        width: 95%;
    }

}

@media only screen and (max-width: 899px) {
	
    #content .grid { 
        grid-template-columns: 95%;
    }
    
    #content {
        width: 95%;
    }
    
}

@media only screen and (max-width: 849px) {

	#layout { 
	    display: grid; 
	    grid-template-columns: 100%;  
	    grid-template-rows: inherit; 
	    gap: 0; 
	    grid-template-areas: 'header' 
                         'nav' 
                         'title'
                         'content'
                         'footer'; 
	}

	#content .title {
		flex-wrap: wrap;
		flex-direction: column;
	}

	#content .title .center, #content .title .left, #content .title .right {
		width: 100%;
	}

	#content .grid { 
		grid-template-columns: 95%;
		grid-template-rows: auto; 
		column-gap: 1%;
		row-gap: 45px;
		justify-items: stretch;
		justify-content: space-around;
		margin: 60px auto 50px;
	}

}

@media only screen and (max-width: 469px) {

	#header img {
		padding-top: 0;
		max-height: 30px;
	}

	#content .core {
		width: 96%;
	}

	#content .grid { 
		row-gap: 35px;
	}
	
	#footer h2 {
		display: none;
	}
	
	#footer .grid .footer-content {
		width: 100%;
	}

	#footer .footer-content.medium {
		display: none;
	}

}
*/