@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;
      }
    }

    .scroll {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      color: $brown;
      font-size: $font-30;
      background: none;
      border: none;
      outline: none;
      padding: 0;
    }
  }

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

    .main-image {
      width: 100%;
      margin: auto auto 5% auto;
      border: 1px solid $black-alpha;
      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;
          width: 100%;
          padding: 0 10px;
        }

        .description {
          position: relative;
          height: 100%;
          padding:  20px;
          text-align: center;

          .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: 3;
            -webkit-box-orient: vertical;
          }

        }

        .link {
          display: block;
          bottom: 20%;
          left: 0;
          width: 100%;
          text-align: center;
          padding-top: 30px;

          .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;
        }
      }

      .slick-prev,
      .slick-next {
        height: 30px;
        width: 30px;
      }
    }
  }

  .bio {
    background: $light-gray;
    margin: 100px 0;

    .main-image {
      width: 100%;
      margin: auto;
      border: 1px solid $black-alpha;
      padding: 10px;
    }

    .description {
      display: block;
      background: $white;
      @include font-style($font-sans, 'regular', $font-18);
      text-align: center;
      color: $gray;
      padding: 50px 12%;
      margin: auto;

      .logo {
        max-height: 60px;
        margin: 20px auto 40px auto;
      }

      .goto {
        margin: 50px auto 20px auto;
        width: 200px;
      }

    }
  }

  .goto {
    margin: 50px auto 20px auto;
    width: 200px;
  }
}


@media (min-width: map-get($grid-breakpoints, 'md')) {
  .component-homeTemplate {
    .products {
      background: linear-gradient(0deg, $white 0%, $white 15%, $light-gray 15%, $light-gray 75%, $white 75%, $white 100%);
      .slider {
        .slide {
          .description {
            padding: 120% 20px 10% 20px;
            text-align: left;

            .subtitle {
              -webkit-line-clamp: 4;
            }
          }

          .link {
            position: absolute;
          }
        }
      }
    }
  }
}