/* CSS personnalisé à ajouter dans Webflow */
/* Style par défaut (desktop) */
.section-2x2-image {
display: flex;
flex-direction: column;
width: 100%;
}
.row {
display: flex;
flex-direction: row;
width: 100%;
height: 300px; /* Ajustez selon vos besoins */
}
.div-block-11, .div-block-12, .div-block-39, .div-block-13, .div-block-45, .div-block-46 {
width: 50%;
height: 100%;
position: relative;
}
.button-6, .button-7, .button-8, .button-9, .button-26, .button-27, .button-28, .button-29 {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
text-decoration: none;
background-color: rgba(255, 255, 255, 0.7);
}
/* Responsive pour tablettes */
@media screen and (max-width: 991px) {
.row {
height: 250px; /* Hauteur réduite sur tablette */
}
}
/* Responsive pour mobile */
@media screen and (max-width: 767px) {
.row {
flex-direction: column;
height: auto;
}
.div-block-11, .div-block-12, .div-block-39, .div-block-13, .div-block-45, .div-block-46 {
width: 100%;
height: 200px; /* Hauteur fixe pour chaque section sur mobile */
margin-bottom: 10px;
}
.button-6, .button-7, .button-8, .button-9, .button-26, .button-27, .button-28, .button-29 {
font-size: 18px !important; /* Force la taille de police sur mobile */
padding: 15px !important;
}
}