.expert-search .grid-row > [class*='col-'] {
  display: flex;
  align-items: stretch;
}
.blog-tile {
  width: 100%;
  height: 31rem;
  background-color: var(--color-white);
  margin-bottom: 3rem;
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.15s cubic-bezier(0.88, 1.73, 0.42, 1.23), transform 0.3s ease-in;
}
  .blog-tile.visible {
    opacity: 1;
    transform: translateY(0px);

  }
  .breakpoint-mobile-only .blog-tile {
    height: unset;
    max-height: 31rem;
  }

.blog-tile__image {
  height: calc(300px * 0.6);
  width: 100%;
  overflow: hidden;
  clip-path: circle(118.7% at 43% -85%);
  -webkit-clip-path: circle(118.7% at 43% -100%);
}
  /* .breakpoint-tablet-landscape .blog-tile__image {
    height: calc(300px * 0.45);
    clip-path: circle(118.7% at 43% -61%);
    -webkit-clip-path: circle(118.7% at 43% -90%);
  } */
  .breakpoint-tablet-landscape .blog-tile__image,
  .breakpoint-tablet-portrait .blog-tile__image,
  .breakpoint-mobile-only .blog-tile__image {
    height: calc(300px * 0.45);
    clip-path: none;
    -webkit-clip-path: none;
  }

  .breakpoint-mobile-only .blog-tile__image {
    height: calc(300px * 0.6); 
    max-height: 13rem;
  }

.blog-tile__image img {
  width: 103%;
  height: auto;
}
.blog-tile__details {
  margin-top: -2rem;
  height: 40%;
  min-height: 4rem;
  padding: 0 1rem;
  font-family: var(--condensed-font);
  overflow: hidden;
}
  .breakpoint-tablet-landscape .blog-tile__details,
  .breakpoint-tablet-portrait .blog-tile__details,
  .breakpoint-mobile-only .blog-tile__details {
    margin-top: unset;
  }
.breakpoint-tablet-landscape .blog-tile__details {
  height: 45%;
}

.blog-tile--clickable {
  border-radius: 1rem;
}
.blog-tile--clickable:hover {
  text-decoration: none;
}

.blog-tile__details .blog-tile--clickable h2 {
  text-align: left;
  color: var(--color-primary);
  margin-top: 1.5rem;
  font-weight: 500;
  font-size: var(--text-large);
}
.blog-tile__details.blog-tile__details--extended {
  height: 100%;
  margin-top: 5rem;
}
  .blog-tile__details.blog-tile__details--extended h2 {
    margin-top: 4rem;
    font-size: var(--text-largest);
    width: 80%;
  }

.blog-tile--clickable::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transition: all 120ms ease-in;
}

.blog-tile--clickable:hover *,
.blog-tile--clickable:active * {
  text-decoration: none;
}

.blog-tile__details p {
  font-family: var(--text-body);
  font-size: var(--text-body);
  color: var(--color-text-light);
  position: relative;
}
  .blog-tile__details p:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0; 
    bottom: 0;
    left: 0;
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 10%,  rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */  
  }
.blog-tile__metadata {
  padding: 1rem;
  width: 100%;
  background-color: var(--color-secondary);
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}
  .blog-tile__metadata p {
    color: var(--color-white);
    font-family: var(--header-font);
    font-size: var(--text-body);
  }
    .blog-tile__metadata .blog-tile__date p {
      text-transform: uppercase;
    }