.ebmnt1-countries {
  background-color: var(--ebmnt1-background-countries);
}

.ebmnt1-countries__inner {
  background-color: var(--ebmnt1-background-countries-inner);
}

/* Cream panel holding the circles (reference: who-we-serve__right) */
.ebmnt1-countries__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 1rem;
  width: 100%;
  padding: 1.8125rem 1.875rem 1.875rem;
  border: 1px solid var(--ebmnt1-border-countries-panel);
  border-radius: var(--ebmnt1-radius-card);
  background-color: var(--ebmnt1-background-countries-panel);
  box-shadow: var(--ebmnt1-shadow-countries-panel);
}

.ebmnt1-country-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 calc(50% - 0.5rem);
  max-width: 12.5rem;
}

.ebmnt1-country-card__circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  margin-inline: auto;
  border: 1px solid var(--ebmnt1-border-country-circle);
  border-radius: var(--ebmnt1-radius-circle);
}

.ebmnt1-country-card__photo {
  position: relative;
  width: 6.875rem;
  overflow: hidden;
  border-radius: var(--ebmnt1-radius-circle);
}

.ebmnt1-country-card__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--ebmnt1-background-country-photo-hover);
  opacity: 0;
  transition: opacity var(--ebmnt1-duration-button) ease;
}

.ebmnt1-country-card:hover .ebmnt1-country-card__photo::before {
  opacity: 0.5;
}

.ebmnt1-country-card__image {
  width: 100%;
  border-radius: var(--ebmnt1-radius-circle);
  transition: transform var(--ebmnt1-duration-button) ease;
}

.ebmnt1-country-card:hover .ebmnt1-country-card__image {
  transform: scale(1.05);
}

/* White icon disc + name box with a small pointer, overlapping the circle */
.ebmnt1-country-card__label {
  margin-block-start: -3.3125rem;
  text-align: center;
}

.ebmnt1-country-card__icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  margin-inline: auto;
  border-radius: var(--ebmnt1-radius-circle);
  background-color: var(--ebmnt1-background-country-icon);
  color: var(--ebmnt1-icon-country);
}

.ebmnt1-country-card__icon .ebmnt1-icon {
  font-size: 1.75rem;
}

.ebmnt1-country-card:hover .ebmnt1-country-card__icon .ebmnt1-icon {
  animation: ebmnt1-wobble-horizontal 1s ease-in-out 1;
}

.ebmnt1-country-card__name {
  position: relative;
  display: block;
  padding: 0.625rem 0.625rem 0.75rem;
  border-radius: 0.3125rem;
  background-color: var(--ebmnt1-background-country-name);
  box-shadow: var(--ebmnt1-shadow-countries-panel);
  color: var(--ebmnt1-text-country-name);
  font-family: var(--ebmnt1-font-family-heading);
  font-size: var(--ebmnt1-font-size-body);
  font-weight: var(--ebmnt1-font-weight-semibold);
  line-height: 1.2;
  transition: color var(--ebmnt1-duration-button) ease;
}

.ebmnt1-country-card__name::before {
  content: "";
  position: absolute;
  inset-block-start: -1.1875rem;
  inset-inline: 1.875rem;
  height: 1.25rem;
  background-color: var(--ebmnt1-background-country-name);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.ebmnt1-country-card:hover .ebmnt1-country-card__name {
  color: var(--ebmnt1-text-country-name-hover);
}

@media (min-width: 768px) {
  .ebmnt1-countries__list {
    gap: 1.25rem 1rem;
  }

  .ebmnt1-country-card {
    flex-basis: calc(25% - 0.75rem);
  }
}