.c-contacts {
  display: grid;
  gap: 1em;
}

.c-contacts--grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.c-contacts--grid-narrow {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.c-contacts--grid-medium {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.c-contacts--grid-large {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.c-contacts--grid-xlarge {
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.c-contact {}

.c-contact--figure.c-contact--img_top,
.c-contact--figure.c-contact--img_left,
.c-contact--figure.c-contact--img_right {
  display: grid;
  grid-gap: 1em;
  gap: 1em;
  align-items: center;
}

.c-contact--img_top {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: 'figure' 'content';
}

.c-contact--img_left {
  grid-template-columns: 2fr 3fr;
  grid-template-rows: 1fr;
  grid-template-areas: 'figure content';
}

.c-contact--img_right {
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr;
  grid-template-areas: 'content figure';
}

.c-contact__figure {
  grid-area: figure;
  margin: 0;
}

.c-contact__figure img {
  display: block;
  max-width: 100%;
}

.c-contact__figure--round img {
  border-radius: 10px;
}

.c-contact__figure--circle img {
  border-radius: 50%;
}

.c-contact__figure--duotone {
  background-color: var(--duo-base);
  position: relative;
}

.c-contact__figure--duotone img {
  filter: grayscale(100%) contrast(1) blur(0px);
  mix-blend-mode: multiply;
}

.c-contact__figure--duotone::before {
  background-color: var(--duo-foreground);
  content: '';
  mix-blend-mode: lighten;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 1;
}

.c-contact__content {
  grid-area: content;
}

.c-contact__name {
  margin: 0;
}

.c-contact__title {}

.c-contact__telephone {
  margin-bottom: 0;
}

.c-contact__email {}

.c-contact__description {}

.c-contact__fact {}

.c-contact__link {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-decoration-color: transparent;
  transition: all ease-out 200ms;
}

.c-contact__link:hover,
.c-contact__link:focus {
  text-decoration-color: inherit;
}

:root {
  --duo-base: #000000;
  --duo-foreground: #ffffff;

  --base:              #f7392b;
  --bg-blend:          multiply;
  --blur:              0px;
  --fg-blend:          lighten;
  --foreground:        #16006f;
  --opacity:           1;
  --spacing:           1%;
}