$image-overlay-max-height: 300px;
$image-overlay-bottom-margin: 36px;

@function category-min-height($overlay-max-height) {
  @return $overlay-max-height + $image-overlay-bottom-margin;
}

.long-description-text {
  margin: ($padding-base-vertical * 2) 0;
  width: 40em;
}

.very-long-description-text {
  width: auto;

  @media (min-width: breakpoint-min("md")) {
    column-gap: 3em;
    column-width: 20em;
  }
}

.browse-landing {
  text-align: center;
  // Placeholder for vertically alignment - might already be available from use in another feature
  %vertical-align {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }

  .category {
    min-height: category-min-height($image-overlay-max-height);
  }

  .image-overlay {
    border: 2px solid $gray-600;
    border-radius: $border-radius-lg;
    margin-bottom: $image-overlay-bottom-margin;
    max-height: 240px;
    min-height: 140px;
    overflow: hidden;
    position: relative;

    img {
      width: 100%;
    }
  }

  .text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2), rgba(0, 0, 0, .4));
    color: $white;
    padding: 8%;
    text-align: center;
    text-shadow: 0 1px 0 $black;
    // prevents potential blur caused by the vertical-align technique
    transform-style: preserve-3d;

    .browse-category-title {
      font-size: $h3-font-size;
      @extend %vertical-align;

      small {
        display: block;
        color: $white;
        margin-top: $padding-large-vertical;
        text-transform: uppercase;
      }
    }

    &:hover {
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
    }
  }

  @media screen and (max-width: breakpoint-max("sm")) {
    .image-overlay {
      margin: 10px auto;
      max-width: 350px;
    }
    .text-overlay .browse-category-title {font-size: $h3-font-size;}
  }
  @media screen and (min-width: breakpoint-min("sm")) and (max-width: breakpoint-max("lg")) {
    $image-overlay-max-height: 250px;
    .category {min-height: category-min-height($image-overlay-max-height);}
    .text-overlay .browse-category-title {font-size: $h4-font-size;}
  }
  @media screen and (min-width: breakpoint-min("sm")) and (max-width: breakpoint-max("md")) {
    $image-overlay-max-height: 180px;
    .category {min-height: category-min-height($image-overlay-max-height);}
    .image-overlay {max-height: $image-overlay-max-height;}
  }
  @media screen and (max-width: breakpoint-max("sm")) {
    $image-overlay-max-height: 180px;
    .category {min-height: category-min-height($image-overlay-max-height);}
  }
  @media screen and (min-width: breakpoint-min("lg")) {
    .category {min-height: category-min-height($image-overlay-max-height);}
    .image-overlay {max-height: $image-overlay-max-height;}
  }
}

.search-box-container {
  margin: 0 auto;
  width: 100%;

  .col-form-label {
    text-align: right;
  }

  .browse-search-form {
    .browse-search-expand {
      text-align: center;
    }

    .btn-reset {
      background-color: transparent;
      display: none;
      left: -40px;
      z-index: 20;
    }

    .search-btn {
      left: -40px;
      z-index: 30;
    }
  }
}