AltoCode
Rofrano
HTML
<!-- ============================================ -->
<!-- Gallery -->
<!-- ============================================ -->
<section id="gallery-2234">
<div class="cs-container">
<div class="cs-content">
<div class="cs-flex">
<span class="cs-topper">Galleria</span>
<h2 class="cs-title">Cattura Momenti Preziosi a ogni Scatto</h2>
</div>
<div class="cs-flex">
<p class="cs-text">
Offriamo corsi on-demand e istruttori dal vivo per workshop e supporto.
Forniamo inoltre corsi di formazione LIVE con istruttore e formazione in sede.
</p>
</div>
</div>
<div class="cs-image-group">
<picture class="cs-picture cs-picture-1">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery1.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery1.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery1.jpg" alt="persona" width="380" height="271">
</picture>
<picture class="cs-picture cs-picture-2">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery2.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery2.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery2.jpg" alt="cena" width="380" height="271">
</picture>
<picture class="cs-picture cs-picture-3">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery3.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery3.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery3.jpg" alt="persona" width="780" height="582">
</picture>
<picture class="cs-picture cs-picture-4">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery4.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery4.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery4.jpg" alt="esterno" width="780" height="582">
</picture>
<picture class="cs-picture cs-picture-5">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery5.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery5.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery5.jpg" alt="cerimonia" width="380" height="271">
</picture>
<picture class="cs-picture cs-picture-6">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery6.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery6.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery6.jpg" alt="cena" width="380" height="271">
</picture>
<picture class="cs-picture cs-picture-7">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery7.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery7.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery7.jpg" alt="persona" width="380" height="271">
</picture>
<picture class="cs-picture cs-picture-8">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery8.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery8.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery8.jpg" alt="cena" width="380" height="271">
</picture>
<picture class="cs-picture cs-picture-9">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery9.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery9.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery9.jpg" alt="persona" width="780" height="582">
</picture>
<picture class="cs-picture cs-picture-10">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery10.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery10.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery10.jpg" alt="esterno" width="780" height="582">
</picture>
<picture class="cs-picture cs-picture-11">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery11.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery11.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery11.jpg" alt="cerimonia" width="380" height="271">
</picture>
<picture class="cs-picture cs-picture-12">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery12.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery12.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery12.jpg" alt="cena" width="380" height="271">
</picture>
<picture class="cs-picture cs-picture-13">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery13.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery13.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/wedding-gallery13.jpg" alt="cena" width="380" height="271">
</picture>
</div>
</div>
</section>
CSS
/*-- -------------------------- -->
<--- Gallery -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
#gallery-2234 {
padding: var(--sectionPadding);
background-color: #fbf5f1;
}
#gallery-2234 .cs-container {
width: 100%;
max-width: 120rem;
margin: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(3rem, 6vw, 4rem);
}
#gallery-2234 .cs-content {
width: 100%;
max-width: 80rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
#gallery-2234 .cs-title {
margin: 0;
}
#gallery-2234 .cs-image-group {
width: 100%;
height: auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: clamp(8.25rem, 20vw, 17.5rem);
gap: clamp(0.5rem, 1.5vw, 1.25rem);
}
#gallery-2234 .cs-picture {
display: block;
position: relative;
}
#gallery-2234 .cs-picture img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
#gallery-2234 .cs-picture-1 {
grid-column: span 6;
grid-row: span 1;
}
#gallery-2234 .cs-picture-2 {
grid-column: span 6;
grid-row: span 1;
}
#gallery-2234 .cs-picture-3 {
grid-column: span 6;
grid-row: span 1;
}
#gallery-2234 .cs-picture-4 {
grid-column: span 6;
grid-row: span 1;
}
#gallery-2234 .cs-picture-5 {
grid-column: span 6;
grid-row: span 1;
}
#gallery-2234 .cs-picture-6 {
grid-column: span 6;
grid-row: span 1;
}
#gallery-2234 .cs-picture-7 {
grid-column: span 12;
grid-row: span 2;
}
#gallery-2234 .cs-picture-8 {
grid-column: span 6;
grid-row: span 1;
}
#gallery-2234 .cs-picture-9 {
grid-column: span 6;
grid-row: span 1;
}
#gallery-2234 .cs-picture-10 {
grid-column: span 6;
grid-row: span 1;
}
#gallery-2234 .cs-picture-11 {
grid-column: span 6;
grid-row: span 1;
}
#gallery-2234 .cs-picture-12 {
grid-column: span 6;
grid-row: span 1;
}
#gallery-2234 .cs-picture-13 {
grid-column: span 6;
grid-row: span 1;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#gallery-2234 .cs-container {
align-items: center;
}
#gallery-2234 .cs-content {
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
}
#gallery-2234 .cs-text {
max-width: 28.1875rem;
}
#gallery-2234 .cs-flex {
min-width: 45%;
}
#gallery-2234 .cs-picture-1 {
grid-column: span 3;
grid-row: span 1;
}
#gallery-2234 .cs-picture-2 {
grid-column: span 3;
grid-row: span 1;
}
#gallery-2234 .cs-picture-3 {
grid-column: span 3;
grid-row: span 1;
}
#gallery-2234 .cs-picture-4 {
grid-column: span 3;
grid-row: span 1;
}
#gallery-2234 .cs-picture-5 {
grid-column: span 3;
grid-row: span 1;
}
#gallery-2234 .cs-picture-6 {
grid-column: span 6;
grid-row: span 2;
}
#gallery-2234 .cs-picture-7 {
grid-column: span 3;
grid-row: span 1;
}
#gallery-2234 .cs-picture-8 {
grid-column: span 3;
grid-row: span 1;
}
#gallery-2234 .cs-picture-9 {
grid-column: span 3;
grid-row: span 1;
}
#gallery-2234 .cs-picture-10 {
grid-column: span 3;
grid-row: span 1;
}
#gallery-2234 .cs-picture-11 {
grid-column: span 3;
grid-row: span 1;
}
#gallery-2234 .cs-picture-12 {
grid-column: span 3;
grid-row: span 1;
}
#gallery-2234 .cs-picture-13 {
grid-column: span 3;
grid-row: span 1;
}
}