dslak_website/src/app/detail/detail.component.scss

@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: 0;
      font-size: $font-34;
      font-weight: bold;
      text-transform: uppercase;
    }

    .text {
      font-size: $font-18;
      text-align: justify;
      padding: 40px 0;
    }

    .date-container {
      display: inline-flex;

      .date {
        display: inline-flex;
        margin: auto;
        font-size: $font-20;
      }

      .date-indication {
        margin: 2px 5px auto 5px;
        font-size: $font-12;
      }
    }

    .gallery {
      padding-top: 40px;

      .gallery-title {
        font-size: $font-18;
        font-weight: bold;
        padding-bottom: 5px;
      }

      .gallery-container {
        position: relative;
        //padding-bottom: 56.25%;
        height: 180px;

        .image{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          cursor: pointer;
          transition: transform .4s;

          &:hover {
            transform: scale(1.2) rotate(1deg);
            z-index: 10;
          }
        }
      }
    }

    .videos {
      padding-bottom: 40px;

      .video-title {
        font-size: $font-18;
        font-weight: bold;
        padding-bottom: 5px;
      }

      .youtube,
      .vimeo,
      .embed {
        position: relative;
        padding-bottom: 56.25%;

        iframe,
        .iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }

    .tags,
    .links {
      display: block;
      font-size: $font-12;
      text-transform: uppercase;
      padding: 5px 0;

      .link {
        display: inline-block;
        font-size: $font-12;
        text-transform: uppercase;
        padding: 0 5px;
        cursor: pointer;
      }
    }

    .back {
      position: absolute;
      top: -40px;
      left: 0px;
      height: 40px;
      width: 60px;
      appearance: none;
      border: none;
      padding: 0;
      font-size: $font-40;
      color: $black-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);

      .date-container {
        position: absolute;
        top: 40px;
        right: 40px;
      }
    }
  }
}