/* ===================================
   MEDIA / IMAGE — utilities generiche
   =================================== */

:root {
  /* ===== Background images (placeholders, sostituibili per progetto) ===== */
  --bg-image-none: none;
  --bg-image-hero: url('/public/images/hero.jpg');
  --bg-image-placeholder: url('/public/images/placeholder.png');

  /* ===== Background overlay defaults ===== */
  --bg-overlay-angle: to bottom;
  --bg-overlay-from: rgba(0,0,0,0.45);
  --bg-overlay-to:   rgba(0,0,0,0.15);

  /* ===== Object fit ===== */
  --img-fit-cover: cover;
  --img-fit-contain: contain;

  /* ===== Object position ===== */
  --img-pos-center: center;
  --img-pos-top: top;
  --img-pos-bottom: bottom;
  --img-pos-left: left;
  --img-pos-right: right;

  /* ===== Filtri (valori di default) ===== */
  --img-contrast: 100%;
  --img-saturate: 100%;
  --img-brightness: 100%;
  --img-sepia: 0%;
  --img-hue: 0deg;
  --img-shadow: 0 0 0 transparent;

  /* ===== Dimensioni standard immagini (puoi ampliare con i tuoi max-width/height) ===== */
  --img-size-sm: 150px;
  --img-size-md: 300px;
  --img-size-lg: 600px;
  --img-size-xl: 1200px;

  /* ===== Aspect ratio ===== */
  --ratio-1x1: 1 / 1;
  --ratio-4x3: 4 / 3;
  --ratio-16x9: 16 / 9;
  --ratio-21x9: 21 / 9;
}
.img-cover-only{
    object-fit: cover;      /* ridimensiona/crop per coprire l’area */
    object-position: center;/* centra il punto di ritaglio */
}
.img-cover{
    width: 100%;            /* occupa tutta la larghezza del contenitore */
    height: 100%;           /* occupa tutta l’altezza del contenitore */
    object-fit: cover;      /* ridimensiona/crop per coprire l’area */
    object-position: center;/* centra il punto di ritaglio */
    
/* MOBILE */
@media (max-width: 767px) {
    .image-home-container{
        width:75%;
        height:225px;
    }
    .image-400-container{
        height:225px;
    }
}