.flag {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 28px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 4px;
  background: #0a3541;
  font-size: 0;
}

.flag-br {
  background: #149447;
}

.flag-br::before {
  content: "";
  position: absolute;
  inset: 4px 5px;
  background: #ffdf35;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.flag-br::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2445a8;
  transform: translate(-50%, -50%);
}

.flag-ca {
  background: linear-gradient(90deg, #d42131 0 25%, #fff 25% 75%, #d42131 75%);
}

.flag-ca::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 14px;
  background: #d42131;
  clip-path: polygon(50% 0, 60% 27%, 88% 18%, 73% 43%, 100% 50%, 70% 58%, 78% 86%, 55% 68%, 50% 100%, 45% 68%, 22% 86%, 30% 58%, 0 50%, 27% 43%, 12% 18%, 40% 27%);
  transform: translate(-50%, -50%);
}

.flag-ch {
  background: #d52b1e;
}

.flag-ch::before,
.flag-ch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.flag-ch::before {
  width: 18px;
  height: 6px;
}

.flag-ch::after {
  width: 6px;
  height: 18px;
}