/* ==================================================================== */
/* 1. FLOAT RIGHT CLASS: Default (Small Screens: < 768px) - CENTERED */
/* ==================================================================== */
.float-right-responsive {
  /* Mobile Style: Center the image */
  float: none !important; 
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  
  /* Set a reasonable mobile width */
  max-width: 80% !important;
  width: auto !important;
  margin-bottom: 20px !important; 
  padding: 0 !important;
}

/* Large Screens (> 768px) - FLOAT RIGHT */
@media (min-width: 768px) {
  .float-right-responsive {
    float: right !important;
    width: 27% !important;
    
    /* Margin: Top, Right, Bottom, Left. Pushes text away from the right side. */
    margin: -10px 0 5px 15px !important; 
    

  }
}


/* ==================================================================== */
/* 2. FLOAT LEFT CLASS: Default (Small Screens: < 768px) - CENTERED */
/* ==================================================================== */
.float-left-responsive {
  /* Mobile Style: Center the image (Same as above) */
  float: none !important; 
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 80% !important;
  width: auto !important;
  margin-bottom: 20px !important; 
  padding: 0 !important;
}

/* Large Screens (> 768px) - FLOAT LEFT */
@media (min-width: 768px) {
  .float-left-responsive {
    float: left !important;
    width: 33% !important;
    
    /* Margin: Top, Right, Bottom, Left. Pushes text away from the left side. */
    margin: 0 15px 0px 15px !important; 

  }
}

.side-by-side-container {
  display: flex; /* Enable flexible box layout */
  justify-content: center; /* Center the items horizontally */
  align-items: flex-start; /* Align items to the top (prevents vertical stretching) */
  flex-wrap: wrap; /* Allows the items to wrap to a new line on small screens */
  margin-bottom: 20px; /* Add space below the whole group */
}

.inline-responsive-img {
  /* Size and responsiveness for 3 items */
  width: 30%; 
  max-width: 100%;
  height: auto;
  
  /* Add a small gutter between images */
  margin: 5px 1% !important; /* Top/Bottom 5px, Left/Right 1% */
  
  /* Crucial: Ensure the image does not conflict with block/float rules */
  display: inline-block !important; 
  float: none !important;
}

/* Fallback/Mobile: Stack them vertically when the screen is too small */
@media (max-width: 767px) {
  .inline-responsive-img {
    width: 90% !important; /* Make each image take up most of the screen */
    margin-bottom: 10px !important;
  }
}