main {
	padding-top: 135px;
}

section {
	display: flex;
    flex-direction: column;
    gap: 25px;
}

#filter-container {
	display: flex;
	width: 100%;
	gap: 15px;
	justify-content: center;
}

.row {
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
}

/* Create three equal columns that floats next to each other */
.column {
	width: 24%;
    height: 250px;
    overflow: hidden;
	display: none; /* Hide columns by default */
	position: relative;
}

/* Clear floats after rows */
.row:after {
	content: "";
	display: table;
	clear: both;
}

/* Content */
.content {
	display: none;
	flex-direction: column;
    justify-content: space-between;
	padding: 15px;
	position: absolute;
    width: 100%;
    height: 100%;
	background: var(--background-color);
	transition: all 1s ease-in-out;
}

.column:hover .content,
.column:active .content{
	display: flex;
}

.content h4 {
	background-color: var(--color-white);
	border: none;
}

.bouton-arrow {
	display: flex;
    justify-content: center;
}

.info-publi {
	display: flex;
    justify-content: space-between;
}

/* The "show" class is added to the filtered elements */
.show {
	display: block;
}


.column .image-container {
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 768px) {
	#filter-container {
		flex-wrap: wrap;
	}

	.column {
		width: 100%;
	}
}