.featured-images-wrapper {
   overflow: hidden;
   display: grid;
   gap: 20px;
   padding-block: 5px;
 }

 .featured-images-list {
   gap: var(--columnGap);
   align-items: flex-start;

   @media (min-width: 768px) {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
   }
 }

 .featured-images-card {
   width: 100%;
   overflow: hidden;
   isolation: isolate;
   position: relative;
   transition: .4s ease;

   @media (min-width: 768px) {
     width: calc(100% / var(--columnCount) - var(--columnGap));
   }
 }

 .featured-images-card-media .media-card {
   border-radius: var(--blockRadius);
 }

 .featured-images-card-media .feature-hover-effect+.media-card {
   background: transparent;
 }

 .featured-images-desc {
   margin-top: 15px;
 }

 .featured-images-card-content {
   &.content-below-image {
     margin-top: 10px;
     line-height: normal;

     @media (min-width: 768px) {
       margin-top: 15px;
     }
   }

   &.content-above-image,
   &.content-above-image-onhover {
     position: absolute;
     padding: 20px;
     z-index: 2;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     pointer-events: none;
     color: var(--overlayTextColor);

     &>* {
       color: var(--overlayTextColor);
     }
   }
 }

 @media (min-width: 768px) {

   .featured-images-header,
   .featured-images-list {
     .featured-images-wrapper:not(.animation-none) & {
       grid-column-start: 1;
       grid-row-start: 1;
     }
   }
 }

 @media (min-width: 1025px) {
   .featured-images-card {
     .featured-images-wrapper:not(.animation-none) & {
       opacity: 0.07;
     }
   }

   /* .featured-images-card:hover:before {
      opacity: 1;
    } */
   .featured-images-card-content.content-above-image-onhover {
     opacity: 0;
     transition: 0.4s ease-out;
     transform: translateY(10px);
   }

   .featured-images-card:hover .featured-images-card-content.content-above-image-onhover {
     opacity: 1;
     transform: translateY(0px);
   }
 }



 .featured-images-card {
   .feature-hover-effect.svg-wrapper {
     opacity: 0;
     scale: 0;
     color: var(--svgHoverColor);
   }

   &:hover {
     .feature-hover-effect.svg-wrapper {
       opacity: 1;
       scale: 1;
     }
   }
 }

 .featured-images-card-media {
   position: relative;

   .feature-hover-effect {
     position: absolute;
     inset: 0;
     animation: circleSpin 15s linear infinite;
     --svgSize: 100%;
     transition: all 0.4s ease;

     &:after {
       content: "";
       background: var(--svgBgColor);
       width: 70%;
       height: 70%;
       position: absolute;
       inset: 0;
       margin: auto;
       border-radius: 50%;
       filter: blur(10px);
       z-index: 0;
     }
   }
 }

 .featured-images-card.background-enabled {
   background: var(--cardBackground);
   padding: 20px;
   border-radius: var(--blockRadius);
 }

 .featured-images-card-border {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   pointer-events: none;
   opacity: 0;
   transition: opacity .4s ease-in-out;
 }

 .featured-images-card-border span {
   position: absolute;
   width: 25%;
   height: 25%;
   transition: all 0.3s ease;
 }

 .featured-images-card-border span:nth-child(1) {
   border-top: 1px solid var(--cardBorder);
   border-left: 1px solid var(--cardBorder);
   border-radius: var(--blockRadius) 0 0 0;
   top: 0;
   left: 0;
 }

 .featured-images-card-border span:nth-child(2) {
   border-top: 1px solid var(--cardBorder);
   border-right: 1px solid var(--cardBorder);
   border-radius: 0 var(--blockRadius) 0 0;
   top: 0;
   right: 0;
 }

 .featured-images-card-border span:nth-child(3) {
   border-bottom: 1px solid var(--cardBorder);
   border-left: 1px solid var(--cardBorder);
   border-radius: 0 0 0 var(--blockRadius);
   bottom: 0;
   left: 0;
 }

 .featured-images-card-border span:nth-child(4) {
   border-bottom: 1px solid var(--cardBorder);
   border-right: 1px solid var(--cardBorder);
   border-radius: 0 0 var(--blockRadius);
   bottom: 0;
   right: 0;
 }

 .featured-images-card.border-hover-effect .featured-images-card-media {
   max-width: 100px;
   margin: 0 auto;
 }

 .featured-images-card.border-hover-effect .img-hover-zoom img {
   transform: none;
 }

 @media (min-width:1025px) {
   .featured-images-card.border-hover-effect:hover .featured-images-card-border {
     opacity: 1;
   }

   .featured-images-card.border-hover-effect:hover {
     background: transparent;
   }
 }

 @keyframes circleSpin {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }