AltoCode
Gioi
HTML
<!-- ============================================ -->
<!-- Gallery -->
<!-- ============================================ -->
<section id="gallery-434">
<div class="cs-container">
<div class="cs-content">
<span class="cs-topper">Portfolio</span>
<h2 class="cs-title">Scopri la Nostra Galleria</h2>
</div>
<div class="cs-grid">
<picture class="cs-picture cs-picture1">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2-m.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg" alt="pianta verde" width="424" height="190">
</picture>
<picture class="cs-picture cs-picture2">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2-m.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg" alt="pianta verde" width="571" height="390">
</picture>
<picture class="cs-picture cs-picture3">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2-m.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg" alt="pianta verde" width="268" height="190">
</picture>
<picture class="cs-picture cs-picture4">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2-m.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg" alt="pianta verde" width="268" height="190">
</picture>
<picture class="cs-picture cs-picture5">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2-m.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg" alt="pianta verde" width="268" height="390">
</picture>
<picture class="cs-picture cs-picture6">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2-m.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg" alt="pianta verde" width="425" height="390">
</picture>
<picture class="cs-picture cs-picture7">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2-m.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg" alt="pianta verde" width="273" height="190">
</picture>
<picture class="cs-picture cs-picture8">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2-m.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg" alt="pianta verde" width="273" height="190">
</picture>
<picture class="cs-picture cs-picture9">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2-m.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg" alt="pianta verde" width="268" height="390">
</picture>
<picture class="cs-picture cs-picture10">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2-m.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg" alt="pianta verde" width="268" height="390">
</picture>
<picture class="cs-picture cs-picture11">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2-m.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.digitaloceanspaces.com/SideBySide/leaves2.jpg" alt="pianta verde" width="268" height="190">
</picture>
</div>
</div>
</section>
CSS
/*-- -------------------------- -->
<--- Gallery -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#gallery-434 {
padding: var(--sectionPadding);
}
#gallery-434 .cs-container {
width: 100%;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(3rem, 6vw, 4rem);
}
#gallery-434 .cs-content {
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#gallery-434 .cs-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: clamp(0.75rem, 1.5vw, 1.875rem);
grid-template-rows: repeat(6, 0.34fr);
}
#gallery-434 .cs-picture {
border-radius: 0.5rem;
overflow: hidden;
position: relative;
display: block;
}
#gallery-434 .cs-picture img {
width: 100%;
height: 100%;
object-fit: cover;
}
#gallery-434 .cs-picture1 {
display: none;
}
#gallery-434 .cs-picture2 {
grid-column: 1 / 9;
grid-row: 1 / 3;
}
#gallery-434 .cs-picture3 {
grid-column: 9 / 13;
grid-row: 1 / 1;
}
#gallery-434 .cs-picture4 {
grid-column: 1 / 7;
grid-row: 4 / 5;
}
#gallery-434 .cs-picture5 {
grid-column: 7 / 13;
grid-row: 4 / 6;
}
#gallery-434 .cs-picture6 {
display: none;
}
#gallery-434 .cs-picture7 {
grid-column: 1 / 5;
grid-row: 3 / 4;
}
#gallery-434 .cs-picture8 {
grid-column: 5 / 9;
grid-row: 3 / 4;
}
#gallery-434 .cs-picture9 {
grid-column: 9 / 13;
grid-row: 2 / 4;
}
#gallery-434 .cs-picture10 {
grid-column: 1 / 7;
grid-row: 5 / 7;
}
#gallery-434 .cs-picture11 {
grid-column: 7 / 13;
grid-row: 6 / 7;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#gallery-434 {
padding-left: 0;
padding-right: 0;
}
#gallery-434 .cs-grid {
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 0.45fr);
}
#gallery-434 .cs-picture1 {
border-radius: 0 0.5rem 0.5rem 0;
display: block;
grid-column: 1 / 3;
grid-row: 1 / 2;
}
#gallery-434 .cs-picture2 {
grid-column: 3 / 5;
grid-row: 1 / 3;
}
#gallery-434 .cs-picture3 {
grid-column: 5 / 6;
grid-row: 1 / 1;
}
#gallery-434 .cs-picture4 {
border-radius: 0.5rem 0 0 0.5rem;
grid-column: 6 / 7;
grid-row: 1 / 1;
}
#gallery-434 .cs-picture5 {
display: none;
}
#gallery-434 .cs-picture6 {
border-radius: 0 0.5rem 0.5rem 0;
display: block;
grid-column: 1 / 3;
grid-row: 2 / 4;
}
#gallery-434 .cs-picture7 {
grid-column: 3 / 4;
grid-row: 3 / 4;
}
#gallery-434 .cs-picture8 {
grid-column: 4 / 5;
grid-row: 3 / 4;
}
#gallery-434 .cs-picture9 {
grid-column: 5 / 6;
grid-row: 2 / 4;
}
#gallery-434 .cs-picture10 {
border-radius: 0.5rem 0 0 0.5rem;
grid-column: 6 / 7;
grid-row: 2 / 4;
}
#gallery-434 .cs-picture11 {
display: none;
}
}
/* Desktop 1600px */
@media only screen and (min-width: 100rem) {
#gallery-434 .cs-grid {
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(3, 0.4fr);
}
#gallery-434 .cs-picture4 {
border-radius: 0.5rem;
}
#gallery-434 .cs-picture5 {
border-radius: 0.5rem 0 0 0.5rem;
display: block;
grid-column: 7 / 8;
grid-row: 1 / 3;
}
#gallery-434 .cs-picture10 {
border-radius: 0.5rem;
}
#gallery-434 .cs-picture11 {
border-radius: 0.5rem 0 0 0.5rem;
display: block;
grid-column: 7 / 8;
grid-row: 3 / 4;
}
}