foto-gallery-css

 <section class="my-foto-gallery">
        <div class="foto-gallery-container">
           <div class="foto-gallery-item">
            <img class="foto-gallery-image" src="./Assets/images/sample.jpg">
           </div>
           <div class="foto-gallery-item">
            <img class="foto-gallery-image" src="./Assets/images/sample.jpg">
           </div>
           <div class="foto-gallery-item">
            <img class="foto-gallery-image" src="./Assets/images/sample.jpg">
           </div>
           <div class="foto-gallery-item">
            <img class="foto-gallery-image" src="./Assets/images/sample.jpg">
           </div>
           <div class="foto-gallery-item">
            <img class="foto-gallery-image" src="./Assets/images/sample.jpg">
           </div>
           <div class="foto-gallery-item">
            <img class="foto-gallery-image" src="./Assets/images/sample.jpg">
           </div>
           <div class="foto-gallery-item">
            <img class="foto-gallery-image" src="./Assets/images/sample.jpg">
           </div>
           <div class="foto-gallery-item">
            <img class="foto-gallery-image" src="./Assets/images/sample.jpg">
           </div>
           <div class="foto-gallery-item">
            <img class="foto-gallery-image" src="./Assets/images/sample.jpg">
           </div>
        </div>
        <a href="'#" class="btn" > SEE ALL PUBLICATIONS</a>
    </section>
    
    #css
    ------
    .my-foto-gallery{
    background-color: var(--clr-dark);
    color: var(--clr-light);
    text-align: center;
}
.foto-gallery-conatiner{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
}
.foto-gallery-item{
    background: var(--clr-accent);
    overflow: hidden;
}
.foto-gallery-image{
    transition:
     transform 750ms cubic-bezier(.5,0,.5,1),
     opacity 250ms linear;
     cursor: pointer;
}

.foto-gallery-item:focus{
    position:relative;
    z-index: 2;
}
.foto-gallery-image:hover,
.foto-gallery-item:focus .experience-image
{
transform: scale(1.2);
opacity: .75;
}