@import "variables";
.block-location-default {
  .block-location-title {
    text-align: center;
    font-size: @font-size-h2;
    font-weight: @font-weight-semibold;
    color: @text-color-p7;
    text-transform: uppercase;
    margin: 0  0 10px 0;
  }
  & > p {
    text-align: center;
    margin-bottom: 47px!important;
  }
  .wrapper-banner-location {
    width: 100%;
    height: 290px;
    position: relative;
    margin-bottom: 30px;
    &:hover {
      .layer-blur {
        background-color: rgba(0, 0, 0, 0.5);
      }
    }
    .img-location {
      width: 100%;
      height: 100%;
      div {
        width: 100%;
        height: 100%;
        padding-bottom: calc(100% * 290 / 380);
        position: relative;
        img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          object-fit: cover;
          object-position: center;
        }
      }
    }
    .layer-blur {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(5, 4, 57, 0.4);
      z-index: 1;
      transition: 250ms all ease-in-out;
    }
    .name-location {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      z-index: 2;
      text-align: center;
      padding: @padding-base-vertical @padding-base-horizontal;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: @text-color-4;
      a {
        color: @text-color-4;
        font-weight: @font-weight-semibold;
        font-size: @font-size-large;
        text-transform: uppercase;
      }
    }
  }
}
