/* responsive breakpoints */
.container {
  padding: 0;
  margin: 0 auto; }
  @media (max-width: 991.98px) {
    .container {
      padding: 0 16px !important; } }

.shape-tile {
  border: 4px solid #FFF;
  -webkit-box-shadow: 9px 9px 6px #00000054;
          box-shadow: 9px 9px 6px #00000054; }

.tile-wrapper {
  position: relative; }
  @media (max-width: 991.98px) {
    .tile-wrapper .tile-image img {
      height: 24.375rem;
      -o-object-fit: cover;
         object-fit: cover; } }
  .tile-wrapper .tile-image::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: 0.4; }
  .tile-wrapper .tile-detail {
    position: absolute;
    left: 1.875rem;
    color: #FFF; }
    .tile-wrapper .tile-detail .tile-heading {
      max-width: 13.25rem;
      font-weight: 700;
      word-break: break-word; }

.rectangle-wrapper .tile-detail {
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%); }

.tile-shape-square {
  /*height: remCalc(408);*/
  position: relative; }
  @media (max-width: 991.98px) {
    .tile-shape-square {
      height: 21.875rem; } }
  .tile-shape-square .tile-detail {
    color: #FFF; }
    .tile-shape-square .tile-detail .tile-heading {
      max-width: 15.375rem; }

.rectangles-wrapper .tile-detail,
.square-wrapper .tile-detail {
  top: 0; }