.slider-squares {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   margin-bottom: $spacer-xl;

   a {
      background: $body-bg-alt;
      display: block;
      position: relative;
      overflow: hidden;
   }

   img {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
   }

   .slider-half {
      margin-bottom: 20px;
      padding-bottom: calc(50% - 10px);
      width: calc(50% - 10px);

      &:nth-last-child(2) {
         order: 10;
      }
   }

   .slider-double {
      align-self: stretch;
      display: flex;
      flex-direction: column;
      padding: 0;

      > a {
         height: calc(50% - 5px);

         &:first-child {
            margin-bottom: 20px;
         }
      }
   }

   .title {
      background: $white;
      color: $text-dark;
      font-weight: $font-weight-bold;
      letter-spacing: $letter-spacing-lg;
      padding: 15px 30px;
      position: absolute;
      left: 10px;
      bottom: 10px;
      text-transform: uppercase;
   }

   @media screen and (max-width: 767px) {
      .title {
         padding: 5px 15px;
      }
   }

   @media screen and (max-width: 553px) {
      .slider-half {
         width: 100%;

         &:not(.slider-double) {
            padding-bottom: 100%;
         }
      }

      .slider-double img {
         position: static;
      }
   }
}
