/* =============================================================
BLUMA BOAT - SLIDER MOBILE IMAGES
=============================================================
ISTRUZIONI:
1. Carica le 5 immagini verticali nella cartella "images" del sito
2. Sostituisci i nomi file qui sotto con i tuoi
3. Aggiungi questo CSS al tuo sito in uno di questi modi:
OPZIONE A - Nel file index.css (alla fine del file)
OPZIONE B - In un nuovo file (es. mobile-slider.css) e linkalo nell'HTML:
OPZIONE C - Direttamente nell'HTML dentro nel
============================================================= */
/* ===== MOBILE: max 768px ===== */
@media (max-width: 768px) {
/* SLIDE 1 - Immagine mobile */
.u-section-1-1 {
background-image: url('images/capri_boat_excursions_bluma_small.jpg') !important;
background-position: center center !important;
background-size: cover !important;
}
/* SLIDE 2 - Immagine mobile */
.u-section-1-2 {
background-image: url('images/wedding_proposal_positano_bluma.jpg') !important;
background-position: center center !important;
background-size: cover !important;
}
/* SLIDE 3 - Immagine mobile */
.u-section-1-3 {
background-image: url('images/sunset-cruise-positano-amalfi_small.jpg') !important;
background-position: center center !important;
background-size: cover !important;
}
/* SLIDE 4 - Immagine mobile */
.u-section-1-4 {
background-image: url('images/boat_tour_capri_positano_small_bluma.jpg') !important;
background-position: center center !important;
background-size: cover !important;
}
/* SLIDE 5 - Immagine mobile */
.u-section-1-5 {
background-image: url('images/amalfi_coast_boats_excursions_small_bluma.jpg') !important;
background-position: center center !important;
background-size: cover !important;
}
}
/* ===== OPZIONALE: Tablet (769px - 1024px) ===== */
/* Decommenta se vuoi immagini diverse anche per tablet */
/*
@media (min-width: 769px) and (max-width: 1024px) {
.u-section-1-1 {
background-image: url('images/slide1-tablet.jpg') !important;
}
.u-section-1-2 {
background-image: url('images/slide2-tablet.jpg') !important;
}
.u-section-1-3 {
background-image: url('images/slide3-tablet.jpg') !important;
}
.u-section-1-4 {
background-image: url('images/slide4-tablet.jpg') !important;
}
.u-section-1-5 {
background-image: url('images/slide5-tablet.jpg') !important;
}
}
*/