_expertise-list.scss

_expertise-list.scss

.expertise-list-headline {
    display: block;
    text-align: center;
    @include rem-fallback("padding-top", 1.25rem);
}

.expertise-list-content-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
}

.expertise-list-item {
  border-style: solid;
  border-width: 1px;
  border-color: $dark-text;
  padding: 0;
  display: flex;
  flex-direction: column;
  @include rem-fallback("height", 20.625rem);
  @include rem-fallback("width", 32.5rem);
  @include rem-fallback("margin", 0.625rem);
}

.expertise-tile-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 85%;
  margin: 0 auto;
  @include rem-fallback("padding-top", 0.625rem);
}

.expertise-tile-item-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 35%;
  .expertise-tile-item-headline-container {
    text-align: left;
    display: inline-block;
    width: 70%;
    align-self: flex-end;
    @include rem-fallback("font-size", 2.1875rem);   
    .expertise-tile-item-headline {
      line-height: 1.12;
      @include rem-fallback("padding-top", 1rem);
      @include rem-fallback("padding-bottom", 1rem);
    }
  }
  .expertise-tile-item-hover-image-container {
    display: inline-block;
    width: 40%;
    height: 100px;
    margin-right: -11%;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
  }
}

.expertise-tile-item-divider-container {
  visibility: hidden;
  opacity: 0;
  height: 0;
  margin-top: 0;
  .expertise-tile-item-divider {
    display: block;
    height: 5px;
    background-color: rgba(0,0,0,1);
    @include rem-fallback("margin-top", 0.625rem);
    @include rem-fallback("width", 6rem);
  }
}



.expertise-tile-text-container {
  display: block;
  height: 65%;
  margin-top: 0;
  .expertise-tile-item-description {
	  line-height: 1.67;
	  @include rem-fallback("font-size", 1.125rem);
	  @include rem-fallback("padding-top", 1rem);	
  }
  .expertise-tile-item-link {
	  line-height: 3.63;
  }
}

.expertise-list-item {
  &:hover, &:focus {
    background-color: $light-background;
    .expertise-tile-item-header-container {
      height: 30%;
      .expertise-tile-item-hover-image-container {
        opacity: 1;
      }
    }
    .expertise-tile-item-divider-container {
      visibility: visible;
      opacity: 1;
      height: 10%;
      display: block;  
    }
    .expertise-tile-item-text-container {
      height: 60%;
    }
    transition: all .3s ease-in;
    * { transition:  .3s ease-in; }
  }
}

@include bp(medium) {
  .expertise-list-headline {
    @include rem-fallback("padding-top", 2.5rem);
  }
}