.place {
  background-color: $color-white;
  cursor: pointer;
  font-family: $benton-sans;
  height: 6rem;
  position: relative;

  .title {
    color: $darkgray;
    transition: color $animation-speed ease;
  }

  &.is-hovered.list {
    .title {
      color: $lpblue;
    }
  }

  &.list {
    margin-bottom: ($gutter / 3);
    margin-top: ($gutter / 3);
    width: 100%;

    &::after {
      border-top: .1rem solid $color-gray;
      bottom: 0;
      content: "";
      display: block;
      height: 0;
      position: absolute;
      right: 0;
      width: ($item-width-list - $image-width - ($order-width / 2));
    }

    .title {
      font-size: 1.6rem;
    }

    .place__pointer {
      display: none;
    }
  }

  &.pin {
    width: $item-width-pin;

    .title {
      font-size: 1.5rem;
    }

    &:hover .title,
    &:focus .title {
      color: $lpblue;
    }

    .subtitle {
      margin-top: .7rem;
    }

    .place__pointer {
      border-left: 1rem solid transparent;
      border-right: 1rem solid transparent;
      border-top: 1rem solid $color-white;
      bottom: -1rem;
      height: 0;
      left: 0;
      margin-left: auto;
      margin-right: auto;
      position: absolute;
      right: 0;
      width: 0;
    }
  }

  &__pic {
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: $image-width;
  }

  &__marker {
    @include marker;
    @include marker-small;
    @include marker-place;
  }

  &__text {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);

    .subtitle {
      color: $font-color-light;
      font-size: 1rem;
      font-weight: 600;
      text-transform: uppercase;
    }

    .list & {
      left: 10.7rem;
      padding-right: 1rem;
      width: ($item-width-list - $image-width - $gutter);
    }

    .pin & {
      line-height: 1;
      padding-right: $gutter;
      right: 0;
      width: ($item-width-pin - $image-width - $gutter);
      word-spacing: -.1em;
    }
  }

  &__icon {
    .list & {
      display: none;
    }

    .pin & {
      background-position: .3rem 61%;
      border-left: .1rem solid #eef1fa;
      height: ($order-width * .6);
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translate(0, -50%);
      width: 1.7rem;

      .icon {
        color: $lpblue;
        left: .5rem;
        margin-top: .1rem;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

        &::before {
          font-size: 1.2rem;
        }
      }
    }
  }
}