.contact_banner {
    --card-padding:40px;
    border-radius: var(--radius); overflow: hidden;
    background-color: var(--ttl_coral); color:var(--ttl_black);
    display: flex; /*align-items: center;*/
    gap: var(--gutter_big);
    position: relative;
  /*  margin: calc(var(--gutter)) 0;*/
    padding:var(--card-padding);
    --icon:40px;
}

.contact_banner.ttl_coral {    background-color: var(--ttl_coral);}
.contact_banner.ttl_lightyellow { background-color: var(--ttl_lightyellow); }
.contact_banner.ttl_blue { background-color: var(--ttl_blue); }
.contact_banner.ttl_green { background-color: var(--ttl_green); }
.contact_banner.ttl_pink { background-color: var(--ttl_pink); }
.contact_banner.ttl_white { background-color: var(--ttl_white); }



.contact_banner > div { width:calc(50% - (var(--gutter_big) / 2)); }
.contact_banner > div:first-child { display: flex; flex-direction: column;   }

.contact_banner > div h2{ font-size: 40px; margin-bottom: 12px; }
.contact_banner > div p{ font-size: 20px; margin-bottom: var(--card-padding) }


.contact_banner > div > div { display: flex; flex-wrap: wrap; column-gap:8px; row-gap: 8px;}
.contact_banner > div > div hr { width: 100%;  border: none;
    height: 1px; margin: 8px 0 12px 0;
    background-color: var(--ttl_lightgrey);}

.contact_banner p.cta:last-child { margin-top: auto; }

div.contact_card { background: white; border-radius:var(--radius); display: flex; gap:var(--gutter); padding: var(--card-padding); }
div.contact_card div { flex:1; }

div.contact_card :is(h3,p) { font-size: 20px; line-height: 1.5; margin:0;}

div.contact_card picture { width: 160px; min-width: 160px;  min-height: 160px;  border-radius: var(--radius); }

div.contact_card a.linkedin { width: 100px; display: block; width: 48px; height: 48px; border-radius: 4px; display: flex; align-items: center; justify-content: center;}
div.contact_card a.linkedin .icon {  font-style: normal !important; color:var(--ttl_black); }
div.contact_card .icon::after { font-family: "ttl_icons";  font-size: var(--icon);   content:"\E80f"; display: block  }
div.contact_card a.linkedin:is(:hover,:focus-visible) {
    opacity: 0.8;}
div.contact_card a.linkedin:focus-visible {
    /* outline:2px solid var(--ttl_error); outline-offset: 2px; */ outline: 3px solid black; box-shadow: 0 0 0 6px white;
}


@media all and (max-width: 1199.98px) {
    .contact_banner > div h2{ font-size: 32px; }

    .contact_banner {
        --card-padding:32px;
    }

}
@media all and (max-width: 1199.98px) and (min-width: 900px) {

    div.contact_card { display: block;}

    div.contact_card picture { width: 100%;  min-height:auto; height:auto; margin-bottom: var(--card-padding); }
    div.contact_card picture::after { content:""; display: block; width: 100%; height: 0; padding-bottom: 100%;   }




}
@media all and (max-width: 899.98px) {

    .contact_banner {
        --card-padding:24px;
        display: block;
    }
    .contact_banner > div { width: 100%;}
    .contact_banner > div h2{ font-size: 24px; }
    .contact_banner>div:first-child { margin-bottom: var(--gutter);}

}

@media all and (max-width: 599.98px) {
    .contact_banner {
        --card-padding:16px;
    }

    div.contact_card :is(h3,p) { font-size: 18px; }

    div.contact_card { display: block;}

    div.contact_card picture { width: 100%;  min-height:auto; height:auto; margin-bottom: var(--card-padding); }
    div.contact_card picture::after { content:""; display: block; width: 100%; height: 0; padding-bottom: 100%;   }


    .contact_banner > div h2{ font-size: 28px;  }
    .contact_banner > div p{ font-size:18px;  }


}

@media (prefers-color-scheme: dark) {
    div.contact_card,
    .contact_banner { background: var(--ttl_black) !important; border: 1px solid white;}
    div.contact_card, div.contact_card a.linkedin .icon,
    .contact_banner{
        color: white;
    }


}