.square-grid{
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  margin-top: $size-large * 2;
  margin-right: 0;
  margin-left: 0;
  padding: 0;
}
.square{
  padding: 0;
  margin: 0;
  flex-grow: 0;
  flex-shrink: 0;
  position: relative;
  flex-basis: 100%;

  &:after{
    content: "";
    display: block;
    padding-bottom: 100%;
  }

  @include media-breakpoint-up(sm){
    flex-basis: 50%;
  }

  @include media-breakpoint-up(lg){
    flex-basis: 33.3333%;
  }

  @include media-breakpoint-up(xxl){
    &:after{
      padding-bottom: 60%;
    }
    img{
      width: 100%;
    }
  }

  .content{
    position: absolute;
    width: 100%;
    height: 100%;
    >div{
      padding: $size-medium;
      @include media-breakpoint-up(xxl){
        padding: $size-medium $size-large;
      }
    }
    h5{
      font-size: 1.6rem;
    }
    p{
      font-size: .9rem;
    }
  }

  img{
    height: 100%;
    min-height: 100%;
  }
  overflow: hidden;
}