/*
 * exhibition hero
 */

.exhibition_hero {
  margin-top: 3rem;
  display: block;
  text-decoration: none;
  overflow: hidden;
}

@media (max-width: 768px) {
  .exhibition_hero {
    margin-top: 2rem;
  }
}

.discovery_list_block .exhibition_hero:first-of-type {
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .discovery_list_block .exhibition_hero:first-of-type {
    margin-top: 1rem;
  }
}

.exhibition_hero .image_cont {
  background: #f1f1f1;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/*
 * after slider
 */

.exhibition_hero .image_cont:after {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: transform 1500ms cubic-bezier(0.76, 0.3, 0.34, 1);
  transform: translateY(100%);
}

.exhibition_hero.hoverable .image_cont:after {
  height: 0.5rem;
  transition: transform 500ms;
}

.exhibition_hero.hoverable:hover .image_cont:after {
  transform: translateY(0);
}

.exhibition_hero.hidden .image_cont:after {
  transform: translateY(20%);
}


.exhibition_hero .image {
  object-fit: cover;
  display: block;
  width: 100%;
  height: 80vh;
}

@media (max-width: 768px) {
  .exhibition_hero .image {
    height: 50vh;
  }
}

.exhibition_hero .text_row {
  position: relative;
  margin-top: 1.5rem;
}

@media (max-width: 1260px) {
  .exhibition_hero .text_row {
    margin-top: 1rem;
  }
}

.exhibition_hero.hoverable:hover .text_row {
  opacity: 0.655;
}

.exhibition_hero .title_col {
  width: 75%;
  float: left;
}

@media (max-width: 1260px) {
  .exhibition_hero .title_col {
    width: auto;
    float: none;
  }
}

.exhibition_hero .date_col {
  width: 25%;
  float: left;
  margin-top: 0.25rem;
}

@media (max-width: 1260px) {
  .exhibition_hero .date_col {
    position: static;
    float: none;
    margin-top: 0.5rem;
    width: auto;
  }
}

@media (max-width: 1260px) {
  .exhibition_hero .label {
    display: none;
  }
}

@media (max-width: 768px) {
  .exhibition_hero .desktop_only {
    display: none;
  }
}


.exhibition_hero .desktop_when {
  display: block;
}

@media (max-width: 1260px) {
  .exhibition_hero .desktop_when {
    display: none;
  }
}


.exhibition_hero .mobile_when {
  display: none;
}

@media (max-width: 1260px) {
  .exhibition_hero .mobile_when {
    display: block;
  }
}

.exhibition_hero .mobile_only {
  display: none;
}

@media (max-width: 768px) {
  .exhibition_hero .mobile_only {
    display: block;
  }
}

.exhibition_hero .video {
  display: block;
  width: 100%;
}