/**
 * @file
 * Grid styling for the HSL bricks grid
 */
.icon-small-sprite, .icon-small-cross-blue, .icon-small-star-blue, .icon-small-star-pink, .icon-small-star-white {
  background: url('../../../img/icon-small-se8cae0c792.png') no-repeat;
}

.icon-small-cross-blue {
  background-position: 0 0;
}

.icon-small-star-blue {
  background-position: 0 -18px;
}

.icon-small-star-pink {
  background-position: 0 -48px;
}

.icon-small-star-white {
  background-position: 0 -33px;
}

/*
 * Medium and bigger breakpoint
 */
@media all and (min-width: 481px) {
  /*
   * Use 4 grid columns for smaller screens.
   */
  .hsl-bricks-grid {
    /* Apply the shared properties of grid items in a single, efficient ruleset. */
  }
  .hsl-bricks-grid .panel-col-first {
    /* Span 2 columns, starting in 1st column from left. */
    float: left;
    width: 50%;
    margin-left: 0%;
    margin-right: -50%;
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    padding-left: 0;
    padding-right: 0;
    clear: left;
  }
  .hsl-bricks-grid .panel-col-last {
    /* Span 2 column, starting in 3th column from left. */
    float: left;
    width: 50%;
    margin-left: 50%;
    margin-right: -100%;
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    padding-left: 0;
    padding-right: 0;
  }
  .hsl-bricks-grid .hsl-four-tiles-row-wrapper {
    padding-left: 0;
    padding-right: 0;
  }
  .hsl-bricks-grid .hsl-four-tiles-row-wrapper .hsl-pane-1 {
    float: left;
    width: 25%;
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    padding-left: 0;
    padding-right: 15px;
    margin-right: 5px;
    clear: left;
  }
  .hsl-bricks-grid .hsl-four-tiles-row-wrapper .hsl-pane-2 {
    float: left;
    width: 25%;
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    padding-left: 0;
    padding-right: 15px;
    margin-right: 5px;
  }
  .hsl-bricks-grid .hsl-four-tiles-row-wrapper .hsl-pane-3 {
    float: left;
    width: 25%;
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    padding-left: 0;
    padding-right: 15px;
    margin-right: 5px;
  }
  .hsl-bricks-grid .hsl-four-tiles-row-wrapper .hsl-pane-4 {
    float: left;
    width: 25%;
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    padding-left: 0;
    padding-right: 15px;
    margin-right: -15px;
  }
}
/*
 * Tablet breakpoint
 */
@media all and (max-width: 767px) {
  /*
   * Use 4 grid columns for smaller screens.
   */
  .hsl-bricks-grid .panel-col-first {
    /* Span 4 columns, starting in 1st column from left. */
    float: left;
    width: 100%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    padding-left: 0;
    padding-right: 0;
    clear: left;
  }
  .hsl-bricks-grid .panel-col-last {
    /* Span 2 column, starting in 3th column from left. */
    clear: left;
    float: left;
    width: 100%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 10px;
    padding-right: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    padding-left: 0;
    padding-right: 0;
  }
}
.panel-grid-row {
  padding-left: 0;
  padding-right: 0;
  clear: left;
}
.panel-grid-row h2.row-title {
  padding-left: 0;
  padding-right: 0;
}

.hsl-bricks-grid .panel-col-top:after,
.hsl-bricks-grid .center-wrapper:after,
.hsl-bricks-grid .panel-col-bottom:after {
  content: "";
  display: table;
  clear: both;
}