.instafeed-wrapper {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 20px;
   margin-top: 40px;

   h6 {
      margin-right: auto;
      margin-bottom: 20px;
      padding-left: 122px;
      font-weight: 600;
   }

   .instafeed-header {
      width: 100%;

      a {
         text-decoration: unset;
      }
   }

   .social-links {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 20px;
      padding-right: 120px;
      position: relative;

      @if $banner-bg-color {
         &::before {
            content: url("/templates/images/instafeed-bubbles.svg");
            position: absolute;
            left: -220px;
            top: -30px;
         }
      }

      a {
         color: $black;
         display: inline-flex;
         align-items: center;
         text-decoration: none;
         text-transform: uppercase;
         letter-spacing: .12em;
         font-weight: 600;
         margin-left: 16px;

         @include haf {
            color: $body-color;
         }
      }

      .fc::before {
         margin: 0 8px;
         font-size: 22px;
      }

      .icons_fb::before {
         position: relative;
         top: -1px;
         font-size: 18px;
      }
   }

   .instafeed {
      width: calc(100% + 1rem);

      a {
         aspect-ratio: 4/5;
         border-radius: 10px;

         img {
            border-radius: 10px;
         }
      }
   }

   @media screen and (max-width: $xl - 1) {
      h6 {
         padding-left: 20px;
      }

      .social-links {
         padding-right: 20px;
      }
   }

   @media screen and (max-width: $md - 1) {
      h6 {
         margin-bottom: 5px;
      }

      .social-links {
         margin-bottom: 5px;

         a {
            margin-bottom: 10px;
         }

         &::before {
            display: none;
         }
      }
   }

   @media screen and (max-width: 700px) {
      .instafeed-header {
         flex-direction: column;
         text-align: center;
      }

      h6 {
         margin-right: unset;
         margin-bottom: 15px;
      }
   }
}

.instafeed {
   display: flex;
   justify-content: space-between;
   width: 100%;
   margin: 0;

   a {
      margin: 5px;
      width: calc(25% - 10px);
      position: relative;
      overflow: hidden;

      &::before {
         content: "";
         display: block;
         padding-top: 100%;
         background: transparent;
         transition: background $transition-speed;
      }

      div {
         background: no-repeat center / cover;
         display: block;
         position: absolute;
         transition: all $transition-speed;
         width: 100%;
         height: 100%;
         left: 0;
         top: 0;
      }

      @include haf {
         &::before {
            background: $brand-primary;
         }

         div {
            opacity: 1;
         }
      }
   }

   @media screen and (max-width: $md - 1) {
      a {
         width: calc(50% - 10px);
      }

      .caption {
         display: none;
      }
   }

   @media screen and (max-width: $sm - 1) {
      a {
         margin: 5px;

         &:first-child {
            width: 100%;
         }

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