﻿
#AlternativeAccommodations
{ 
    margin: 0;

    & > div{
        display:flex;
        flex-direction:row;
        column-gap:8px;
        row-gap:30px;
        flex-grow:1;
        margin-top: 30px;
        align-items:stretch;
        justify-content:space-between;

        @media @mobile{
            flex-direction:column;
        }
    }

    .AlternativeAccommodation
    { 
        text-decoration: none; 
        float: left; 
        width: 300px;
        @media @mobile{
            width:270px;
        }

        &:last-child {  }
        h1 {
            font-size:17px; 
            line-height:22px;
            color:@color-text-body;
            margin-bottom:0;
        } 
        h2
        { 
            font-size: 14px;
            line-height:14px;
            margin-bottom: 15px;
            color: @color-primary;
        }

        img
        {
            display: block;
            width: 100%;
            height: 150px;
            margin: 0 auto;
            object-fit: cover;
            border-top-left-radius:8px;
            border-top-right-radius:8px;
        }
    
        .content{
            border-bottom-left-radius:8px;
            border-bottom-right-radius:8px;
            border-left:1px solid @color-primary-light-50;
            border-right:1px solid @color-primary-light-50;
            border-bottom:1px solid @color-primary-light-50;
            padding:10px;
            height:~"calc(100% - 150px)";
            position:relative;
            display:flex;
            flex-direction:column;

            h1{
                margin-bottom:5px;
            }

            ul{
                position:relative;

                li{
			        padding-left:25px;
    			    line-height: 17px;
                    position:relative;
                    @pv-searchresult-info();
                    margin-bottom:8px;
                    color:@color-text-body;

                    @pv-matrix-vink();
                    &::before 
                    {
                        display: inline-block;
                        top:0;
                        left:0;
                        position:absolute;
                        margin-right:5px;
                    }
                }
            }
        }

        .price{
            position:relative;
            margin-top:15px;
            @pv-pricetag();
            flex-grow:1;
            min-height:50px;

            .price-tag{
                text-align:right;
                position:absolute;
                right:10px;
                bottom:10px;
                top:auto;
            }
        }

        .button{
            margin-top:10px;
        }
    }

    .gotoResults { 
        font-size: 15px; 
        margin-top:20px;
        display:inline-block;
    }
}