#himage {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-height: 600px;
  height: calc(100vh - 320px);
  min-height: 350px; }
  @media (max-width: 320px) {
    #himage {
      max-height: 320px;
      height: calc(80vh - 120px); } }
  @media (min-width: 321px) and (max-width: 767px) {
    #himage {
      max-height: 320px;
      height: calc(80vh - 120px); } }
  @media (min-width: 768px) and (max-width: 991px) {
    #himage {
      max-height: 320px;
      height: calc(80vh - 120px); } }
  #himage .item {
    background-position: center;
    background-size: cover;
    position: relative;
    max-height: 600px;
    height: calc(100vh - 320px);
    min-height: 350px; }
    @media (max-width: 320px) {
      #himage .item {
        max-height: 320px;
        height: calc(100vh - 120px);
        min-height: 100px; } }
    @media (min-width: 321px) and (max-width: 767px) {
      #himage .item {
        max-height: 320px;
        height: calc(100vh - 120px);
        min-height: 100px; } }
    @media (min-width: 768px) and (max-width: 991px) {
      #himage .item {
        max-height: 320px;
        height: calc(100vh - 120px);
        min-height: 100px; } }
    #himage .item picture {
      width: 100%;
      height: 100%;
      display: flex; }
      #himage .item picture img {
        object-fit: cover;
        height: auto;
        width: 100%; }
    #himage .item:after {
      content: '';
      width: 100%;
      height: 215px;
      position: absolute;
      left: 0;
      z-index: 1; }
    #himage .item:after {
      background: linear-gradient(180deg, rgba(196, 196, 196, 0) 0%, #000000 100%);
      bottom: 0;
      z-index: 1; }