@import '../../../../../mixins'

#AccommodationOption
  max-width: 16rem
  margin-bottom: 1rem
  cursor: pointer
  border: 5px solid $medium-green
  border-radius: 1.3rem
  box-shadow: 0 1rem 1rem 0 $dark-green
  .accommodationImage
    width: 16rem
    height: 16rem
    border-top-right-radius: 1rem
    border-top-left-radius: 1rem
    background-position: center center
    background-size: cover
  .hoverText
    background-color: transparentize($light-green, 0.7)
    color: $dark-green
    width: 100%
    height: 100%
    border-top-right-radius: 1rem
    border-top-left-radius: 1rem
    display: flex
    flex-flow: nowrap column
    justify-content: center
    align-items: center
    p
      font-size: 20pt
      font-family: 'Montserrat'
      font-weight: bold
  .accommodationName
    background-color: $dark-green
    color: $light-green
    font-family: 'Montserrat'
    font-weight: normal
    text-align: center
    padding: 0.4rem
    border-bottom-right-radius: 1rem
    border-bottom-left-radius: 1rem
  @include breakpoint(tablet_portrait)
    margin-bottom: 2rem
    max-width: 18rem
    .accommodationImage
      width: 18rem
    .accommodationName
      padding: 0.8rem
    transition: 0.2s
    &:hover
      transform: translateY(-0.5rem)
      box-shadow: 0 1.5rem 1rem 0 $dark-green