$instafeed-width: full !default;

#instafeed {
   margin: 10px -10px;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;

   a {
      display: inline-block;
      position: relative;
      margin: 0 10px 20px;
      max-width: 130px;
      width: calc(100% / 6 - 20px);

      @media screen and (min-width: 1200px) {
         &:hover figcaption {
            opacity: 1;
         }
      }

      @media screen and (max-width: 1659px) {
         width: calc(100% / 5 - 20px);

         &:last-child {
            display: none;
         }
      }

      @media screen and (max-width: 1199px) {
         width: calc(100% / 4 - 20px);

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

      @media screen and (max-width: 991px) {
         width: calc(100% / 3 - 10px);
         margin: 0 5px 10px;

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

      @media screen and (max-width: 767px) {
         max-width: none;

         &:nth-child(n+4) {
            display: inline-block;
         }
      }

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

   figure {
      margin: 0;
      padding-top: 100%;
      background-size: cover;
   }

   figcaption {
      line-height: 1.3;
      opacity: 0;
      position: absolute;
      padding: 10px;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background: transparentize($black, .4);
      transition: all .5s ease-in-out;
   }

   p {
      @include translateY(-50%);

      font-size: 14px;
      text-align: center;
      color: $white;
      padding: 0;
      margin: 50% 0 0;
      line-height: 1.4;
      max-height: 165px;
      overflow: hidden;

      @media screen and (min-width: 1660px) {
         max-height: 220px;
      }
   }

   img {
      @include img-responsive;

      display: none;
   }

   @media screen and (max-width: 991px) {
      margin: 10px -5px;
   }
}

.home-social-row {
   .social-link {
      @include underline-never;

      color: $brand-primary;

      &:hover,
      &:active,
      &:focus {
         color: darken($brand-primary, 10);
      }
   }

   @media screen and (max-width: 991px) {
      .h1 {
         font-size: 26px;
      }
   }
}
