body {
    --picture_tenant: url("../../../images/company/batiment_les_bulles_d_awen.avif");
    background: linear-gradient(to right, var(--linear-gradient-first-color), var(--linear-gradient-second-color));
}

.listTenant-page{
    margin-bottom: 10vh;
    & .listTenant-picture{
        position: relative;
        height: 600px;
        overflow: hidden;

        &::before {
            content: "";
            position: absolute;
            inset: -10px;

            background:
                    linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
                    linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.5)),
                    var(--picture_tenant);

            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;

            filter: blur(4px);
        }
        & h1{
            position: relative;
            z-index: 1;
            color: #FFFFFF;
            font-size: 3em;
            text-align: center;
        }
    }
    & .block-presentation{
        padding-top: 10vh;
        padding-bottom: 5vh;
        p{
            color: var(--dark-color);
        }
    }
}

.picture-tenant{
    margin-top: 5vh;
    margin-right: 2vh;
    margin-left: 2vh;
    &.padding-right{
        padding-left: 2vw;
        padding-right: 5vw;
    }
    &.padding-left{
        padding-left: 5vw;
        padding-right: 2vw;
    }
    & .picture-block{
        background-color: var(--light-color);
        border-radius: 20px;
        padding: 20px;
        & .picture{
            text-align: center;
            margin-top: 20px;
            border-radius: 50%;
            width: 14vh;
            height: 14vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            & img {
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                object-fit: cover;
            }
        }
        & h2{
            text-align: center;
            color: var(--light-brick);
            font-weight: bold;
            line-height: 160%;
            font-size: 2em;
            padding-top: 20px;
            padding-left: 20px;
        }
        & p{
            padding: 0 20px;
            text-align: center;
        }
        & .content{
            & p{
                padding: 40px 20px;
            }
        }
    }
    & .tenant-contact{
        position: relative;
        bottom: 1.5em;
        & a{
            margin: 0 10px;
        }
    }
}

@media (max-width: 992px) {
    .listTenant-page {
        margin-bottom: 5vh;
        & .listTenant-picture{
            height: 400px;
    }
    .picture-tenant{
        &.padding-right{
            padding: 0;
        }
        &.padding-left{
            padding: 0;
        }
    }
        & .tenant-contact{
            & a{
                padding: 0 5px;
            }
        }
    }
}