.instafeed-header {
   h3 {
      font-size: $font-size-h2;
      text-align: center;
      margin-bottom: 10px;
      margin-left: auto;

      a {
         text-decoration: unset;
      }
   }

   .social-links {
      display: none;
   }
}

.instafeed-wrapper {
   overflow: hidden;
}

.instafeed {
   display: flex;
   margin: 0 -5px 5px -5px;

   .instafeed-item {
      margin: 5px;
      width: calc(20% - 10px);
      position: relative;
      overflow: hidden;

      &::before {
         content: "";
         display: block;
         position: relative;
         padding-top: 100%;
         background: $black;
      }

      &::after {
         @include fonticon;

         content: $icons_instagram;
         position: absolute;
         right: 12px;
         bottom: 12px;
         color: $white;
         font-size: 22px;
         z-index: 2;
      }

      > a,
      .image {
         background: no-repeat center / cover;
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         z-index: 1;
         transition: opacity $transition-speed;
      }

      @include haf {
         .image {
            opacity: .6;
         }
      }
   }
}

@media screen and (max-width: $lg - 1) {
   .instafeed {
      .instafeed-item {
         width: calc(25% - 10px);

         &:nth-child(4) {
            display: none;
         }
      }
   }
}

@media screen and (max-width: $md - 1) {
   .instafeed-wrapper {
      padding-left: 15px;
      padding-right: 15px;
   }

   .instafeed {
      flex-wrap: wrap;
      margin-left: 0;
      margin-right: 0;

      .instafeed-item {
         width: calc(50% - 10px);
      }
   }
}

@media screen and (max-width: $sm - 1) {
   .instafeed {
      .instafeed-item {
         &:first-child {
            width: 100%;
         }

         &:nth-child(3) {
            display: none;
         }
      }
   }
}


@media screen and (max-width: $xs - 1) {
   .instafeed-header h3 {
      font-size: $font-size-h2-resp;
   }
}
