<!-- fuwaimg -->
<ul class="gallerylist">
 <li class="gallerylist__item">
  <a href="http://placehold.jp/800x600.png?text=sample" class="fuwaimg"><img src="http://placehold.jp/800x600.png?text=sample" alt=""></a>
 </li>
</ul>

<!-- spotlight -->
<ul class="gallerylist">
 <li class="gallerylist__item">
  <a href="http://placehold.jp/800x600.png?text=sample" class="spotlight"><img src="http://placehold.jp/800x600.png?text=sample" alt=""></a>
 </li>
</ul>

/*－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

GALLERY

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－*/
.gallerylist {
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
 margin: 40px 0;
}

.gallerylist__item {
 width: calc((100% - 80px)/5);
 height: auto;

 @media screen and (max-width: 1024px) {
  width: calc((100% - 60px)/4);
 }

 @media screen and (max-width: 767px) {
  width: calc((100% - 40px)/3);
 }

 @media screen and (max-width: 520px) {
  width: calc((100% - 20px)/2);
 }

 a {
  position: relative;
  width: 100%;
  display: block;

  &::before {
   content: "";
   display: block;
   padding-top: 100%;
   /*100%=親要素の横幅*/
  }

  img {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
  }

 }

}