AltoCode

Trentinara

HTML


<!-- ============================================ -->
<!--                  Gallery                     -->
<!-- ============================================ -->

<div id="gallery-1689">
    <picture class="cs-picture">
        <source media="(max-width: 600px)"
                srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-1.jpg">
        <source media="(min-width: 601px)"
                srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-1.jpg">
        <img loading="lazy" decoding="async"
                src="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-1.jpg" alt="foto ricordo" width="480" height="549">
    </picture>
    <picture class="cs-picture">
        <source media="(max-width: 600px)"
                srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-2.jpg">
        <source media="(min-width: 601px)"
                srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-2.jpg">
        <img loading="lazy" decoding="async"
                src="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-2.jpg" alt="foto ricordo" width="480" height="549">
    </picture>
    <picture class="cs-picture">
        <source media="(max-width: 600px)"
                srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-3.jpg">
        <source media="(min-width: 601px)"
                srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-3.jpg">
        <img loading="lazy" decoding="async"
                src="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-3.jpg" alt="foto ricordo" width="480" height="549">
    </picture>
    <picture class="cs-picture">
        <source media="(max-width: 600px)"
                srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-4.jpg">
        <source media="(min-width: 601px)"
                srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-4.jpg">
        <img loading="lazy" decoding="async"
                src="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-4.jpg" alt="foto ricordo" width="480" height="549">
    </picture>
    <picture class="cs-picture">
        <source media="(max-width: 600px)"
                srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-5.jpg">
        <source media="(min-width: 601px)"
                srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-5.jpg">
        <img loading="lazy" decoding="async"
                src="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-5.jpg" alt="foto ricordo" width="480" height="549">
    </picture>
    <picture class="cs-picture">
        <source media="(max-width: 600px)"
                srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-6.jpg">
        <source media="(min-width: 601px)"
                srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-6.jpg">
        <img loading="lazy" decoding="async"
                src="https://csimages2.nyc3.digitaloceanspaces.com/Images/MISC/enterprise-gallery-6.jpg" alt="foto ricordo" width="480" height="549">
    </picture>
</div>

CSS


/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-1689 {
    padding: var(--sectionPadding);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  #gallery-1689 .cs-picture {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    aspect-ratio: 109/180;
  }
  #gallery-1689 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #gallery-1689 {
    grid-template-columns: repeat(6, 1fr);
  }
  #gallery-1689 .cs-picture {
    height: clamp(11.25rem, 30vw, 26.25rem);
    aspect-ratio: initial;
  }
}