@import "../../src/scss/variables.scss";
@import "../../src/scss/mixins.scss";

.component-homeTemplate {
  background: $white;

  .banner {
    position: relative;
    background: $light-gray;
    height: 100vh;

    .logo-container {
      position: relative;
      height: 100vh;

      .logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        height: 80%;
        object-fit: contain;
      }
    }
  }

  .products {
    background: linear-gradient(0deg, $white 0%, $white 15%, $light-gray 15%, $light-gray 75%, $white 75%, $white 100%);

    .main-image {
      width: 100%;
      margin: auto auto 5% auto;
      border: 1px solid $light-gray;
      padding: 10px;
      background: $white;
    }

    .slider {
      display: block;
      width: calc(100% - 80px);
      height: 100%;
      margin: auto;

      .slide {
        position: relative;
        display: flex !important;
        padding: 0 5%;

        .image {
          width: 55%;
          float: left;
          padding: 0 10px;
        }

        .description {
          position: relative;
          width: 45%;
          padding: 50% 20px 10% 20px;
          float: left;

          .title {
            display: block;
            @include font-style($font-serif, 'regular-italic', $font-24);
            color: $brown;
          }

          .subtitle {
            display: block;
            display: -webkit-box;
            @include font-style($font-serif, 'regular-italic', $font-18);
            color: $olive-dark;
            overflow: hidden;
            max-width: 100%;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
          }

        }

        .link {
          position: absolute;
          display: block;
          bottom: 20%;
          left: 0;
          width: 100%;
          text-align: center;

          .icon {
            display: block;
            color: $brown;
            font-size: $font-30;
          }

          .label {
            display: block;
            @include font-style($font-serif, 'regular-italic', $font-22);
            color: $olive-dark;
          }
        }
      }


      .slick-arrow {
        &:before {
          font-size: $font-30;
        }
      }
    }
  }
}