.specialist_layout .image{
    aspect-ratio: 3/4;
    background-color: lightgray;
    overflow: clip;
    position: relative;
}
.specialist_layout:nth-child(2n) .image{
    background-color: gray;
}

.specialist_layout .image img{
    position: absolute;
    object-fit: cover;
    object-position: center;
    width: 100%; height: 100%;
}
.specialist_layout .text{
    padding: 1.5rem var(--grid-margin);
}

.specialist_layout .text h3{
    font-size: 18px;
    margin-bottom: 0;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans'
}

.specialist_layout + dialog {
    max-width: 1150px;
}

.specialist_layout + dialog .dialog--close{
    position: absolute;
    top: 1.5rem; right: 1.5rem;
    background-color: #F9F9F9;
    border-radius: 50%;
}

.specialist_layout + dialog .dialog--close::before{
    content: '';
    width: 1rem; height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 1L1 13M1 1L13 13' stroke='%230A0A0A' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-size: contain; background-repeat: no-repeat;
}

.specialist_layout + dialog .dialog_inner{
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.specialist_layout + dialog .image{
    aspect-ratio: 3.8 / 5;
    position: relative;
    overflow: clip;
}

.specialist_layout + dialog .image img{
    object-fit: cover;
    object-position: center;
    width: 100%; height: 100%;
}

.specialist_layout + dialog .content{
    padding: var(--grid-margin);
    display: flex;
    flex-direction: column;
}

.specialist_layout + dialog .name{
    font-family: "Nocturne Serif",Verdana,Arial,sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: .5rem;
}
.specialist_layout + dialog .role{
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.specialist_layout + dialog .intro{
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;   
}

.specialist_layout + dialog .contact{
    margin-bottom: 2rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.specialist_layout + dialog .contact a{
    display: flex;
    justify-content: center; align-items: center;
    width: fit-content; height: auto;
    padding-inline: .5rem;
    border: 1px solid currentColor;
    aspect-ratio: 1;
}

.specialist_layout + dialog .contact a::before{
    content: '';
    width: 1.5rem; height: 1.5rem;
    background-color: currentColor;
    mask: var(--mask-url) no-repeat center / contain;
    -webkit-mask: var(--mask-url) no-repeat center / contain;
}

.specialist_layout + dialog .contact .email_url::before{
    --mask-url: url("data:image/svg+xml,%3Csvg width='18' height='16' viewBox='0 0 18 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.3337 3.83331L9.84116 8.60581C9.5869 8.75349 9.29811 8.83128 9.00408 8.83128C8.71004 8.83128 8.42125 8.75349 8.16699 8.60581L0.666992 3.83331M2.33366 1.33331H15.667C16.5875 1.33331 17.3337 2.07951 17.3337 2.99998V13C17.3337 13.9205 16.5875 14.6666 15.667 14.6666H2.33366C1.41318 14.6666 0.666992 13.9205 0.666992 13V2.99998C0.666992 2.07951 1.41318 1.33331 2.33366 1.33331Z' stroke='%230A0A0A' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.specialist_layout + dialog .contact .phone_url::before{
    --mask-url: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.527 12.8067C10.6991 12.8857 10.893 12.9038 11.0767 12.8579C11.2605 12.812 11.4231 12.7049 11.5378 12.5542L11.8337 12.1667C11.9889 11.9597 12.1902 11.7917 12.4216 11.676C12.6531 11.5603 12.9083 11.5 13.167 11.5H15.667C16.109 11.5 16.5329 11.6756 16.8455 11.9882C17.1581 12.3007 17.3337 12.7247 17.3337 13.1667V15.6667C17.3337 16.1087 17.1581 16.5326 16.8455 16.8452C16.5329 17.1578 16.109 17.3334 15.667 17.3334C11.6887 17.3334 7.87344 15.753 5.06039 12.94C2.24734 10.1269 0.666992 6.3116 0.666992 2.33335C0.666992 1.89133 0.842587 1.4674 1.15515 1.15484C1.46771 0.842282 1.89163 0.666687 2.33366 0.666687H4.83366C5.27569 0.666687 5.69961 0.842282 6.01217 1.15484C6.32473 1.4674 6.50033 1.89133 6.50033 2.33335V4.83335C6.50033 5.0921 6.44008 5.34728 6.32437 5.57871C6.20866 5.81014 6.04065 6.01144 5.83366 6.16669L5.44366 6.45919C5.29067 6.576 5.18284 6.74217 5.13848 6.92948C5.09413 7.11678 5.11598 7.31367 5.20033 7.48669C6.33923 9.79991 8.21235 11.6707 10.527 12.8067Z' stroke='%230A0A0A' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.specialist_layout + dialog .contact .linkedin_url::before{
    --mask-url: url("data:image/svg+xml,%3Csvg width='18' height='17' viewBox='0 0 18 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.3337 5.66669C13.6597 5.66669 14.9315 6.19347 15.8692 7.13115C16.8069 8.06883 17.3337 9.3406 17.3337 10.6667V16.5H14.0003V10.6667C14.0003 10.2247 13.8247 9.80074 13.5122 9.48818C13.1996 9.17562 12.7757 9.00002 12.3337 9.00002C11.8916 9.00002 11.4677 9.17562 11.1551 9.48818C10.8426 9.80074 10.667 10.2247 10.667 10.6667V16.5H7.33366V10.6667C7.33366 9.3406 7.86044 8.06883 8.79812 7.13115C9.73581 6.19347 11.0076 5.66669 12.3337 5.66669Z' stroke='%230A0A0A' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.00033 6.50002H0.666992V16.5H4.00033V6.50002Z' stroke='%230A0A0A' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.33366 4.00002C3.25413 4.00002 4.00033 3.25383 4.00033 2.33335C4.00033 1.41288 3.25413 0.666687 2.33366 0.666687C1.41318 0.666687 0.666992 1.41288 0.666992 2.33335C0.666992 3.25383 1.41318 4.00002 2.33366 4.00002Z' stroke='%230A0A0A' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

@media only screen and (max-width: 992px) {

    .specialist_layout .text{
        padding: var(--grid-margin);
    }

    .specialist_layout + dialog {
        margin-inline: var(--grid-margin);
    }
    .specialist_layout + dialog .dialog_inner{
        grid-template-columns: minmax(0, 1fr);
    }


}