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

.component-detail {
  z-index: 0;

  .content {
    position: relative;
    margin: 150px auto 80px auto;
    padding: 40px 50px;
    background: $white-alpha;
    color: $black;
    box-shadow: 0px 0px 25px $white-alpha;
    border-radius: 10px;

    .title {
      margin-top: 0;
      font-size: $font-34;
      font-weight: bold;
      text-transform: uppercase;
    }

    .text {
      font-size: $font-18;
      text-align: justify;
    }

    .tags {
      display: block;
      font-size: $font-12;
      text-transform: uppercase;
      padding-top: 40px;
    }

    .back {
      position: absolute;
      top: -40px;
      left: 0px;
      height: 40px;
      width: 60px;
      appearance: none;
      border: none;
      padding: 0;
      font-size: $font-40;
      color: $white-alpha;
      background: transparent;
      cursor: pointer;
      transition: transform .3s;
      -webkit-backface-visibility: hidden;

      &:hover {
        transform: scale(1.1) translateX(-10px);
      }
    }
  }
}

@media (min-width: map-get($grid-breakpoints, 'md')) {
 .component-detail {
    .content {
      transform: rotate(2deg) skew(0deg, -6deg);
    }
  }
}