:root, .theme--white {
  --list-contact-divider-color: var(--gray);
}

.theme--gray {
  --list-contact-divider-color: #fff;
}

.list-contact__list-content {
  margin-top: 15px;
  list-style-type: none;
}

.list-contact__list-entry {
  margin: 0;
}

.list-contact__list-entry:not(:last-child) {
  border-bottom: 1px solid var(--list-contact-divider-color);
  margin-bottom: 15px;
  padding-bottom: 15px;
}

.list-contact__list-entry-link {
  display: block;
  position: relative;
  padding-right: 1.5em;
  color: var(--yellow);
  text-decoration: none;
}

.list-contact__list-entry-link::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  height: 1em;
  width: 1em;
  mask: var(--arrow-right) center center / contain no-repeat;
  -webkit-mask: var(--arrow-right) center center / contain no-repeat;
  color: inherit;
  background-color: currentColor;
  transform: translateY(-50%);
}

.list-contact__list-link {
  margin-top: 15px;
}

.list-contact__contact {
  position: relative;
  margin-top: 30px;
  padding: 30px;
  background-color: var(--blue);
  border-bottom-left-radius: var(--rounded-corners);
  border-top-right-radius: var(--rounded-corners);
}

{#
.list-contact__contact::after {
  content: "";
  display: block;
  background-color: var(--blue);
  position: absolute;
  top: 0;
  left: 100%;
  width: var(--module-padding-right);
  height: 100%;
}
#}

.list-contact__contact-title {
  margin-bottom: 15px;
}

.list-contact__contact-wrapper {
  display: flex;
  flex-direction: column;
}

.list-contact__contact-image {
  width: 50%;
  height: auto;
  border-top-left-radius: var(--rounded-corners);
  border-bottom-right-radius: var(--rounded-corners);
}

.list-contact__contact-infos {
  margin-top: 15px;
  flex: 1;
}

@media (min-width: 600px) {
  
  .list-contact__contact {
    padding: 45px;
  }
  
  .list-contact__contact-wrapper {
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
  }
  
  .list-contact__contact-image {
    width: 30%;
  }
  
}

@media (min-width: 900px) {
  
  .list-contact {
    display: flex;
    align-items: flex-start;
    gap: 30px;
  }
  
  .list-contact__list-content,
  .list-contact__list-link {
    margin-top: 30px;
  }
  
  .list-contact__list {
    flex: 0.8;
  }
  
  .list-contact__contact {
    flex: 1;
  }
  
  .list-contact__contact {
    margin-top: 0;  
    padding: 60px;
    margin-bottom: calc(-1 * calc(2 * var(--module-padding-bottom)));
    z-index: 1;
  }
  
  .list-contact__contact-title {
    margin-bottom: 30px;
  }
  
  .list-contact__contact-image {
    width: 35%;
  }
  
  .module--list-contact-gray {
    --list-contact-bottom-background: var(--gray);
  }

  .module--list-contact-black {
    --list-contact-bottom-background: var(--coal);
  }

  .module--list-contact::after {
    content: "";
    display: block;
    width: calc(100% + calc(var(--module-padding-left) + var(--module-padding-left)));
    height: calc(2 * var(--module-padding-bottom));
    position: relative;
    left: calc(-1 * var(--module-padding-left));
    right: calc(-1 * var(--module-padding-right));
    bottom: calc(-1 * var(--module-padding-bottom));
    background-color: var(--list-contact-bottom-background, #fff);
  }
  
}

@media (min-width: 1200px) {
  
  .list-contact {
    gap: 60px;
  }
  
  .list-contact__list-link {
    margin-top: 45px;
  }
  
  {#
  .list-contact__contact {
    border-top-right-radius: var(--rounded-corners);
  }
  
  .list-contact__contact::after {
    display: none;
  }
  #}
  
  .list-contact__contact-image {
    width: 40%;
  }
  
  /* blue box grows with screen */
  /*
  .list-contact__contact::after {
    width: max(var(--module-padding-left), calc(calc(100vw - var(--containerwidth))  / 2));
  }
  */

}