AltoCode
Cardile
HTML
<!-- ============================================ -->
<!-- Gallery -->
<!-- ============================================ -->
<section id="gallery-2243">
<div class="cs-container">
<div class="cs-content">
<span class="cs-topper">Galleria</span>
<h2 class="cs-title">Un team dedicato di fotografi che cattura momenti preziosi a ogni scatto</h2>
<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 class="cs-gallery">
<picture class="cs-picture cs-picture1">
<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-picture2">
<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="persona" width="380" height="271">
</picture>
<picture class="cs-picture cs-picture3">
<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="380" height="271">
</picture>
<picture class="cs-picture cs-picture4">
<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="persona" width="380" height="271">
</picture>
<picture class="cs-picture cs-picture5">
<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="persona" width="380" height="271">
</picture>
</div>
</div>
</section>
CSS
/*-- -------------------------- -->
<--- Gallery -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#gallery-2243 {
padding: var(--sectionPadding);
overflow: hidden;
position: relative;
z-index: 1;
}
#gallery-2243 .cs-container {
width: 100%;
max-width: 115rem;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(3rem, 5vw, 4rem);
position: relative;
z-index: 1;
}
#gallery-2243 .cs-content {
text-align: center;
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 2;
}
#gallery-2243 .cs-title {
max-width: 40ch;
}
#gallery-2243 .cs-gallery {
width: 100%;
height: auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(16, 16.666vw);
gap: clamp(0.5rem, 2vw, 1.25rem);
}
#gallery-2243 .cs-picture {
grid-column: span 6;
display: block;
position: relative;
z-index: 1;
}
#gallery-2243 .cs-picture img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
#gallery-2243 .cs-picture1 {
grid-row: 2 / span 3;
}
#gallery-2243 .cs-picture2 {
grid-row: 1 / span 4;
}
#gallery-2243 .cs-picture3 {
grid-column: span 12;
grid-row: 5 / span 5;
}
#gallery-2243 .cs-picture4 {
grid-row: 10 / span 4;
}
#gallery-2243 .cs-picture5 {
grid-row: 11 / span 3;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#gallery-2243 .cs-gallery {
height: clamp(20rem, 41vw, 37.5rem);
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(5, 1fr);
}
#gallery-2243 .cs-gallery .cs-picture {
grid-column: span 1;
}
#gallery-2243 .cs-gallery .cs-picture1 {
grid-column: 1 / span 1;
grid-row: 2 / span 3;
}
#gallery-2243 .cs-gallery .cs-picture2 {
grid-column: 2 / span 1;
grid-row: 1 / span 4;
}
#gallery-2243 .cs-gallery .cs-picture3 {
grid-column: 3 / span 2;
grid-row: 1 / span 6;
}
#gallery-2243 .cs-gallery .cs-picture4 {
grid-column: 5 / span 1;
grid-row: 1 / span 4;
}
#gallery-2243 .cs-gallery .cs-picture5 {
grid-column: 6 / span 1;
grid-row: 2 / span 3;
}
}
/* Desktop - 1600px */
@media only screen and (min-width: 100rem) {
#gallery-2243 .cs-gallery {
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(6, 1fr);
}
#gallery-2243 .cs-gallery .cs-picture {
grid-column: span 1;
}
#gallery-2243 .cs-gallery .cs-picture1 {
grid-column: 1 / span 1;
grid-row: 2 / span 4;
}
#gallery-2243 .cs-gallery .cs-picture2 {
grid-column: 2 / span 1;
grid-row: 1 / span 5;
}
#gallery-2243 .cs-gallery .cs-picture3 {
grid-column: 3 / span 1;
grid-row: 1 / span 6;
}
#gallery-2243 .cs-gallery .cs-picture4 {
grid-column: 4 / span 1;
grid-row: 1 / span 5;
}
#gallery-2243 .cs-gallery .cs-picture5 {
grid-column: 5 / span 1;
grid-row: 2 / span 4;
}
}