/* header, footer */
.footer {
	color: var(--grayverydark);
	//background-color: var(--graylight);
	background-image: linear-gradient(var(--grayverylight),var(--graydark));
	overflow: hidden;
	//border-top: 3px solid transparent; /* set the border to be transparent */
	border-bottom: 3px solid transparent; /* set the border to be transparent */
	border-image: var(--gradient) 1;
	padding: 20px 10px 20px 10px;
}

.footer p{
	width: 95%;
}

/* three icons top right*/
.fixed-image-row {
	position: fixed;
	top: 5px;
	right: 5px;
	display: flex;              /* aligns them in a row */
	gap: 2px;                   /* optional spacing between images */
	padding: 10px;              /* optional spacing from edge */
	z-index: 1001;
}

.fixed-image-row img {
	width: 30px;
	height: auto;
}

/* grid for footer, with and without logo */
#grid {
    display: grid;
    width: 95%;
    grid-template-columns: 240px 3px 50px 1fr; /* define the grid structure */
    grid-template-rows: repeat(3, auto); /* 3 rows with automatic height */
    margin: 0 auto;
}

#gridcontact {
    display: grid;
    width: 95%;
    grid-template-columns: 240px 3px 50px 1fr; /* define the grid structure */
    grid-template-rows: repeat(3, auto); /* 3 rows with automatic height */
    margin: 0 auto;
}

.un-column {
    grid-row: 1 / span 3; /* merge all rows into one */
    display: flex;
    align-items: center;
    justify-content: center;
}

.deux-column {
    grid-row: 1 / span 3; /* merge all rows into one */
    background-image: var(--gradientv);
}

.trois-column {
	padding: 5px;
}

/* devices */
@media screen and (max-width: 450px) {
    #grid {
    	display: grid;
    	width: 95%;
    	grid-template-columns: 0px 3px 50px 1fr; /* define the grid structure */
	}
	#gridcontact {
    	display: grid;
    	width: 95%;
    	grid-template-columns: 0px 3px 50px 1fr; /* define the grid structure */
	}
	.un-column img {
        width: 0px; /* logo vanishes */
    }
}