@charset "UTF-8";
/* CSS Document */

.rectangle_display {
    width: 200px;
    height: 150px;
    padding: 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    margin-right: 20px;
    display: inline-block;
    margin-bottom: 0; /* Annuler la marge inférieure par défaut */
    vertical-align: top; /* Aligner les rectangles par le haut */
}

@media screen and (max-width: 600px) {
    .rectangle_display {
        margin-bottom: 10px; /* Ajouter un espace de 10px entre les rectangles sur les appareils mobiles */
        margin-right: 20px; /* Conserver la marge à droite pour les écrans plus larges */
        display: block; /* Afficher en bloc pour une disposition verticale sur les appareils mobiles */
    }

    .rectangle_display:last-child {
        margin-bottom: 0; /* Ne pas ajouter de marge en bas au dernier élément pour éviter un espace supplémentaire */
    }
}