@import "../../assets/scss/variables";

.component-portfolio {
  padding-top: 140px;

  .box {
    position: relative;
    display: flex;
    background: $black;
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0;
    padding: 20px;
    cursor: pointer;
    transition: transform .4s;

    .image {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 100%;
      width: 100%;
      object-fit: cover;
      transform: translate(-50%, -50%);
      transition: transform .4s;
      opacity: .5;
      z-index: 0;
    }

    .text {
      display: block;
      margin: auto;
      text-align: center;
      transform: translate(0%, 0%);
      z-index: 1;

      .title {
        display: block;
        color: $white;
        font-size: $font-24;
        text-transform: uppercase;
        font-weight: bold;
      }

      .type {
        display: block;
        color: $white;
        font-size: $font-18;
        font-weight: bold;
      }

      .tags {
        display: block;
        color: $white;
        font-size: $font-14;
        text-transform: uppercase;
        font-weight: bold;
        padding-top: 20px;
      }
    }

    @each $angle in 0,1,2,3,4,5,6 {
      &.skew-#{$angle} {transform: skew(#{$angle - 3}deg, #{$angle - 3}deg) ;}
    }

    &:hover {
      z-index: 50;

      @each $angle in 0,1,2,3,4,5,6 {
          &.skew-#{$angle} {transform: scale(1.4) rotate(2deg) skew(#{3 - $angle}deg, #{3 - $angle}deg) ;}
        }

      .image {
        transform: translate(-50%, -50%) scale(1.4);
      }
    }
  }
}