mixin thumbnail-triangle( data )
  .thumbnail-triangle
    .inner.inner-1
        .inner.inner-2
          .inner.content

.page
  section.triangle-gallery
    .container.position-relative
      .row.justify-content-center
        .col-3: +thumbnail-triangle
        .col-3: +thumbnail-triangle
        .col-3: +thumbnail-triangle
        .col-3: +thumbnail-triangle
      .row.justify-content-center.triangle-inverted
        .col-3: +thumbnail-triangle
        .col-3: +thumbnail-triangle
        .col-3: +thumbnail-triangle
    .container.position-relative
      .row.justify-content-center
        .col-3: +thumbnail-triangle
        .col-3: +thumbnail-triangle
        .col-3: +thumbnail-triangle
      .row.justify-content-center.triangle-inverted
        .col-3: +thumbnail-triangle
        .col-3: +thumbnail-triangle
        .col-3: +thumbnail-triangle
        .col-3: +thumbnail-triangle
    .container.position-relative
      .row.justify-content-center
        .col-3: +thumbnail-triangle
        .col-3: +thumbnail-triangle
      .row.justify-content-center.triangle-inverted
        .col-3: +thumbnail-triangle
        .col-3: +thumbnail-triangle
        .col-3: +thumbnail-triangle

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  background: #333;
  color: white;
}

.page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 90vh;
  overflow: hidden;
}

.triangle-gallery {
  .container {
    position: relative;
    margin-bottom: -30px;

    [class*='col-'] {
      margin-bottom: 30px;
    }
  }
  
  .triangle-inverted {
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    pointer-events: none;
  }
  
  .container + .container {
    margin-top: 15px;
  }
}


.thumbnail-triangle {
  position: relative;
  padding-top: 100%;

  .inner,
  &::before,
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 100%;
    height: 100%;
    width: 100%;
  }

  &::before,
  &::after {
    content: '';
    pointer-events: none;
    border: 3px solid white;
    border-top-color: transparent;
  }

  &::before {
    transform: skew(-26.5deg);
    border-right-color: transparent;
  }

  &::after {
    transform: skew(26.5deg);
    border-left-color: transparent;
  }

  .inner {
    overflow: hidden;
  }

  .inner-1 {
    top: 20px;
    left: 15px;
    height: calc( 100% - 30px );
    width: calc( 100% - 30px );
    transform: skew(-26.5deg);
  }

  .inner-2 {
    transform: skew(45deg);
  }

  .content {
    transform: skew(-27.5deg);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;

    background: url(https://i.kym-cdn.com/photos/images/original/001/257/557/1a6.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1005px;
      opacity: 0;
      pointer-events: none;
      background: rgba(white,.5);
      transition: .25s;
    }
    
    &:hover {
      cursor: pointer;

      &::before {
        opacity: 1;
      }
    }
  }

  .triangle-inverted & {
    .inner,
    &::before,
    &::after {
      transform-origin: 0 0;
    }

    &::before,
    &::after {
      border: 3px solid white;
      border-bottom-color: transparent;
    }

    &::before {
      border-left-color: transparent;
    }

    &::after {
      border-right-color: transparent;
    }

    .inner-1 {
      top: 10px;
    }
  }
}