@import "../../../../styles";


.component{
  max-width: $width-page-max;
}

.browse-tile {
  cursor: pointer;
  background-color: $color-browse-tile-bg;
  text-decoration: none;
}

.tile-content{
  text-align: center;
  min-width:100%;
  min-height: 100%;
}

.tile-text {
  color:$browse-tile-font-color;
  width:80%;
  transform: translate(0%, -50%);
  @include mat-typography-level-to-styles($app-browse-grid-typography, body-1);
}

.tile-icon {

  color:$browse-tile-font-color;
  font-size: mat-font-size($app-browse-grid-typography, body-2);
  font-weight: mat-font-weight($app-browse-grid-typography, body-2);
  width:100%;
  position:absolute;
  bottom:20%;

}





//.tile-text-xs {
//  @extend  .tile-text;
//  //@include mat-typography-level-to-styles($app-browse-grid-typography, body-1);
//  //font-size:100%;
//}

//@media (min-width: 600px) and (max-width: 780px) {
//  .tile-text {
//    //color:black;
//    //font-size:95%;
//  }
//}

@import "../../../../styles";

.component {
  max-width: $width-page-max;
}

.browse-tile {
  cursor: pointer;
  background-color: $color-browse-tile-bg;
  text-decoration: none;
}

.tile-content {
  text-align: center;
}

.tile-text {
  color: $browse-tile-font-color;
  transform: translate(0%, -50%);
  @include mat-typography-level-to-styles($app-browse-grid-typography, body-1);
}

.tile-icon {
  color: $browse-tile-font-color;
  font-size: mat-font-size($app-browse-grid-typography, body-2);
  font-weight: mat-font-weight($app-browse-grid-typography, body-2);
  width: 100%;
  position: absolute;
  bottom: 20%;
  left: 0; // For IE11, so that the icon will be centred, despite absolute positioning being used
}

Adjust formatting Change styles so that tiles are displayed properly in IE11
Adjust formatting
Change styles so that tiles are displayed properly in IE11
