/* ===== Layout centré : grande à gauche, 2 carrés à droite ===== */
.rosefly-home-container{
  /* centrer dans la page */
  width:min(90vw, 1200px);
  margin-inline:auto;

  /* grille 2 colonnes */
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:15px;
  align-items:stretch;

  /* utile si la grille est plus étroite que la zone dispo */
  justify-content:center;
}

/* liens = conteneurs */
.rosefly-home-container a{
  display:block;
  text-decoration:none;
}

/* Grande image : remplit la hauteur de la colonne de droite */
.rosefly-home-container > a.big{
  position:relative;
}
.rosefly-home-container > a.big img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Colonne de droite : 2 carrés superposés */
.rosefly-home-container > .small-container{
  display:grid;
  grid-template-rows: 1fr 1fr; /* 2 blocs de même hauteur */
  gap:15px;
}
.rosefly-home-container > .small-container a.small{
  position:relative;
    width: 50%!important;
  aspect-ratio:1/1;
  overflow:hidden;
}
.rosefly-home-container > .small-container a.small img{
  position:absolute; inset:0;
  width:100%; height:auto;
  object-fit:cover;
}

/* ===== Mobile ===== */
@media (max-width:768px){
  .rosefly-home-container{
    width:min(100%, 640px);     /* bloc centré et contenu resserré */
    padding-inline:12px;
    grid-template-columns: 1fr; /* une seule colonne */
    gap:12px;
    justify-items:center;       /* centre les enfants dans la grille */
  }
  .rosefly-home-container > a.big img{
    height:auto;                /* reprend son ratio naturellement */
  }
  .rosefly-home-container > .small-container{
    flex: 1 1 0!important;
    display: flex!important;
    flex-direction: row!important;
    gap: 15px!important;
    margin: 0!important;
  }
}
/* ===== MOBILE : 2 carrés côte à côte ===== */
@media (max-width:768px){
  .rosefly-home-container{
    grid-template-columns: 1fr;   /* la grande au-dessus */
    justify-items: stretch;       /* évite le centrage qui rétrécit */
    gap:12px;
  }

  /* la colonne de droite devient une grille 2 colonnes */
  .rosefly-home-container > .small-container{
    width:100%;
    display:grid;
    grid-template-columns: 1fr 1fr; /* >>> côte à côte <<< */
    grid-auto-rows: 1fr;
    gap:12px;
  }

  .rosefly-home-container > .small-container a.small{
    width:100%;
    aspect-ratio: 1 / 1;          /* carrés */
    position:relative;
    overflow:hidden;
  }
  .rosefly-home-container > .small-container a.small img{
    position:absolute; inset:0;
    width:50%; height:auto;
    object-fit:cover;
  }
}