.grid-wrapper {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: grid; }

.center-wrapper {
  position: relative;
  align-self: center;
  justify-self: center;
  width: min(100vh, 100vw);
  height: min(100vh, 100vw); }

.badge-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%; }

.badge-locator {
  position: absolute;
  display: grid;
  place-items: center;
  z-index: 5; }

.badge-locator.is-active {
  z-index: 9999; }

.menu-clicker {
  display: inline-block;
  position: relative; }

.badge {
  --badge-width: clamp(3rem, 2.5vw, 5.5rem);
  --badge-height: calc(var(--badge-width) * 1.55);
  --badge-circle-size: calc(var(--badge-width) * 0.95);
  --badge-ribbon-width: calc(var(--badge-width) * 1.55);
  --badge-ribbon-font: clamp(0.25rem, 1vmax, 0.8rem);
  position: relative;
  width: var(--badge-width);
  height: var(--badge-height);
  border-radius: 0.625rem;
  display: inline-block;
  text-align: center;
  transition: transform 0.2s ease; }
  .badge:hover {
    transform: translateY(-0.5rem); }
  .badge::before, .badge::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: inherit; }
  .badge::before {
    transform: rotate(60deg); }
  .badge::after {
    transform: rotate(-60deg); }

.badge__circle {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  width: var(--badge-circle-size);
  height: var(--badge-circle-size);
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center; }
  .badge__circle svg {
    width: 80%;
    height: 80%;
    display: block; }

.badge__ribbon {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  display: inline-block;
  width: fit-content;
  min-width: var(--badge-ribbon-width);
  max-width: min(90vw, calc(100vw - 2rem));
  padding: 0.35rem 0.5rem;
  border-radius: 0.25rem;
  color: #fff;
  font-size: var(--badge-ribbon-font);
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom right, #555 0%, #333 100%);
  pointer-events: none; }

.ClickEventDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  animation-name: Click_Effect;
  animation-duration: 2s;
  animation-fill-mode: backwards;
  pointer-events: none; }

@keyframes Click_Effect {
  0% {
    width: 10px;
    height: 10px;
    opacity: 1;
    transform: translate(-50%, -50%); }
  25% {
    width: 10px;
    height: 300vh;
    opacity: 1;
    transform: translate(-50%, -50%); }
  50%,
  60% {
    width: 300vw;
    height: 300vh;
    opacity: 1;
    transform: translate(-50%, -50%); }
  100% {
    width: 300vw;
    height: 300vh;
    opacity: 0;
    transform: translate(-50%, -50%); } }
@media (min-aspect-ratio: 1 / 1) {
  .badge-container {
    --top-offset: 1%;
    --bottom-offset: 1%;
    --left-padding: 6%;
    position: absolute;
    inset: 0; }

  #badgeNb0 {
    top: var(--top-offset);
    left: calc(100% - 6 * var(--left-padding)); }

  #badgeNb1 {
    top: var(--top-offset);
    left: calc(100% - 5 * var(--left-padding)); }

  #badgeNb2 {
    top: var(--top-offset);
    left: calc(100% - 4 * var(--left-padding)); }

  #badgeNb3 {
    top: var(--top-offset);
    left: calc(100% - 3 * var(--left-padding)); }

  #badgeNb4 {
    top: var(--top-offset);
    left: calc(100% - 2 * var(--left-padding)); }

  #badgeNb5 {
    top: var(--top-offset);
    left: calc(100% - 1 * var(--left-padding)); }

  #badgeNb6 {
    bottom: var(--bottom-offset);
    left: calc(100% - 2 * var(--left-padding)); }

  #badgeNb7 {
    bottom: var(--bottom-offset);
    left: calc(100% - 1 * var(--left-padding)); } }
@media (max-aspect-ratio: 1 / 1) {
  .badge-container {
    --badge-width: clamp(3rem, 14vw, 4.5rem);
    --badge-ribbon-width: calc(var(--badge-width) * 1.55);
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding-block: 1rem;
    padding-inline: max(1rem, calc((var(--badge-ribbon-width) - var(--badge-width)) / 2 + 0.5rem));
    min-height: 280px;
    justify-items: center;
    align-items: center;
    box-sizing: border-box; }

  .badge-locator {
    position: relative; }

  #badgeNb0 {
    grid-column: 1;
    grid-row: 1; }

  #badgeNb1 {
    grid-column: 2;
    grid-row: 1; }

  #badgeNb2 {
    grid-column: 3;
    grid-row: 1; }

  #badgeNb3 {
    grid-column: 4;
    grid-row: 1; }

  #badgeNb4 {
    grid-column: 1;
    grid-row: 2; }

  #badgeNb5 {
    grid-column: 2;
    grid-row: 2; }

  #badgeNb6 {
    grid-column: 3;
    grid-row: 2; }

  #badgeNb7 {
    grid-column: 4;
    grid-row: 2; }

  .badge {
    --badge-width: clamp(3rem, 14vw, 4.5rem); } }

/*# sourceMappingURL=badges.css.map */