/* Contact-card geometry follows the original 900 x 510 graphics.
   Percent positions and container-relative type scale together in both contexts. */
.contact-card {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 900 / 510;
    width: 100%;
    /* One solid background rectangle: no overlapping transparent edge gradients.
       Background position percentages resolve against the remaining free space:
       x = 42/(900-814), y = 31/(510-447). */
    background-color: #fff;
    background-image: linear-gradient(var(--card-color), var(--card-color));
    background-repeat: no-repeat;
    background-size: 90.444444% 87.647059%;
    background-position: 48.837209% 49.206349%;
    text-align: left;
    -webkit-text-stroke: 0;
}
.contact-card__background {
    position: absolute;
    left: 4.666667%;
    top: 6.078431%;
    width: 90.444444%;
    height: 87.647059%;
    /* This transparent holder only clips the decorative SVG. */
    overflow: hidden;
    pointer-events: none;
}
.contact-card--business {
    background-size: 90.444444% 87.843137%;
    background-position: 48.837209% 45.161290%; /* y = 28/(510-448). */
}
.contact-card--business .contact-card__background {
    top: 5.490196%;
    height: 87.843137%;
}
.contact-card img { display: block; max-width: none; margin: 0; float: none; }
.contact-card .contact-card__corner {
    position: absolute;
    width: 22.36%;
    height: 49%;
}
.contact-card--sosu .contact-card__corner { right: 0; bottom: 0; }
.contact-card--tech .contact-card__corner { left: 0; bottom: 0; }
.contact-card--business .contact-card__corner { right: 0; top: 0; }
.contact-card--green .contact-card__corner { left: 0; top: 0; }
.contact-card .contact-card__portrait {
    position: absolute;
    width: 21.666667%;
    height: 38.235294%; /* Same diameter: 195/510 of the card height. */
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    overflow: hidden;
}
.contact-card .contact-card__heading {
    position: absolute;
    margin: 0;
    padding: 0;
    line-height: 0;
}
.contact-card .contact-card__heading img { width: 100%; height: auto; }
.contact-card .contact-card__details {
    position: absolute;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 4.444444cqw;
    font-weight: 300;
    font-style: normal;
    line-height: 1.15;
    letter-spacing: -0.025em;
    white-space: nowrap;
}
.contact-card__name,
.contact-card .contact-card__details a {
    display: block;
    color: #fff;
    border: 0;
    text-decoration: none;
}
.contact-card .contact-card__details a:hover { text-decoration: underline; }
.contact-card .contact-card__details a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
#contacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 5%;
    padding: 30px 4% 0;
    box-sizing: border-box;
}
.contact-card {
    transform: scale(1);
    transform-origin: center;
    transition: transform 0.4s ease;
}
@media (hover: hover) {
    .contact-card:hover { transform: scale(1.05); z-index: 1; }
}
@media (max-width: 600px) {
    #contacts { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-left: 0; padding-right: 0; }
}

.contact-card--sosu { --card-color: rgb(0, 91, 53); }
.contact-card--sosu .contact-card__portrait { left: 10.555556%; top: 20.980392%; }
.contact-card--sosu .contact-card__heading { left: 33.222222%; top: 31.176471%; width: 15.333333%; }
.contact-card--sosu .contact-card__details { left: 34.333333%; top: 50.000000%; }
.contact-card--tech { --card-color: rgb(230, 59, 18); }
.contact-card--tech .contact-card__portrait { left: 67.888889%; top: 21.176471%; }
.contact-card--tech .contact-card__heading { left: 27.777778%; top: 29.803922%; width: 14.666667%; }
.contact-card--tech .contact-card__details { left: 28.222222%; top: 50.000000%; }
.contact-card--business { --card-color: rgb(0, 69, 117); }
.contact-card--business .contact-card__portrait { left: 10.333333%; top: 37.058824%; }
.contact-card--business .contact-card__heading { left: 33.222222%; top: 60.588235%; width: 25.444444%; }
.contact-card--business .contact-card__details { left: 35.111111%; top: 21.568627%; }
.contact-card--green { --card-color: rgb(194, 200, 0); }
.contact-card--green .contact-card__portrait { left: 67.222222%; top: 38.235294%; }
.contact-card--green .contact-card__heading { left: 27.000000%; top: 58.431373%; width: 18.111111%; }
.contact-card--green .contact-card__details { left: 28.222222%; top: 24.901961%; }

/* A real card has no intrinsic image width: size its inline-block footer explicitly. */
footer.container.contact-footer { width: min(660px, 100%); box-sizing: border-box; }
@media (max-width: 750px) {
    footer.container.contact-footer { width: calc(100% - 32px); margin-inline: auto; padding: 24px 0; }
}
@media (max-width: 600px) {
    .container.contact-section { margin-inline: 0; padding: 24px 0; }
}