// TASACIONES
#tasaciones-grid {
    padding: 50px 0;
}

.tasaciones-item {
    margin: 0 0 20px 0;
    background: #4d4b4b;
    padding: 30px 50px 30px 30px;
    
    @include media-xs {
        padding: 15px;
    }
    
    &:last-child {
        margin: 0;
    }
    
    & > .row {
        margin: 0;
    }
    
    &:hover {
        .tasaciones-image {
            a {
                background-size: auto 120% !important;
            }
        }
    }
    
    @media (min-width: 768px) {
        & > .row {
            display: flex;
            align-items: stretch;
        }
    }
    
}

.tasaciones-image {
    overflow: hidden;
    padding: 0;
    position: relative;
    a {
        display: block;
        width: 100%;
        height: 100%;
        transition: 0.3s;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: auto 110% !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        @include media-xs {
            position: relative;
            height: 300px;
        }
    }
}
.tasaciones-info {
    position: relative;
    padding: 0;
    > div {
        padding: 20px 35px;
        background: #9a9a98;
    }
    .format {
        display: inline-block;
        background: $black;
        color: $white;
        text-transform: uppercase;
        font-family: $vbold;
        font-size: 18px;
        padding: 3px 12px;
        position: absolute;
        top: calc(50% - 15px);
        right: -58px;
        transform: rotate(-90deg);
        &.alquiler {
            right: -72px;
        }
    }
    h4 {
        display: inline-block;
        padding-right: 33%;
        margin: 0;
        color: $black;
        text-transform: uppercase;
        font-family: $vbold;
        font-size: 22px;
    }
    h5 {
        font-family: $vbold;
        font-size: 21px;
        text-transform: none;
        color: $white;
        margin: 0 0 15px 0;
    }
    .price {
        position: absolute;
        top: 20px;
        right: 35px;
        color: $white;
        font-family: $lora;
        font-size: 31px;
        span {
            font-size: 21px;
        }
    }
    .type {
        color: $white;
        text-transform: uppercase;
        font-family: $vbold;
        font-size: 14px;
        margin: 0 0 20px 0;
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    li {
        display: inline-block;
        padding: 0 20px;
        border-right: 1px solid #184543;
        color: $white;
        font-family: $lora;
        font-style: italic;
        font-size: 29px;
        &:first-child {
            padding-left: 0;
        }
        &:last-child {
            border: none;
        }
        span {
            color: $white;
            text-transform: uppercase;
            font-family: $vbold;
            font-size: 13px;
            font-style: normal;
        }
        @include media-md {
            padding: 0 15px;
            font-size: 26px;
            span {
                font-size: 10px;
            }
        }
    }
    
    
    @include media-sm {
        .price {
            position: relative;
            left: 0;
            top: 0;
            margin: 5px 0;
        }
        h4 {
            padding: 0;
        }
    }
    
    @include media-xs {
        .format, .alquiler {
            right: 0 !important;
            top: 0;
            transform: translate(0);
        }
    }
    
    @media (max-width: 530px) {
        li {
            padding: 0 10px;
        }
        > div {
            padding: 20px 15px;
        }
    }
    
    @media (max-width: 450px) {
        li {
            padding: 0 5px;
            font-size: 18px;
        }
    }
    
}