#stamps {
  position: relative;
  .stamps {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    border-collapse: collapse;
    box-sizing: border-box;

    .full-card {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(-12deg);
      font-size: 120px;
      width: 100%;
      text-align: center;
      z-index: 3;
      opacity: 0.8;
      color: #bf0b0b;
    }

    .stamp {
      border: 2px solid #444;
      border-radius: 20%;
      margin-left: -2px;
      margin-bottom: -2px;
      transition: border-color 0.5s ease;
      position: relative;
      aspect-ratio: 1 / 1;

      img {
        max-width: 100%;
        padding: 24px;
      }

      .number {
        position: absolute;
        font-size: 96px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        z-index: 3;
      }
    }

    .stamp.full {
      border-color: #fc9906;
      z-index: 2;
      .number {
        display: none;
      }
      img {
        animation: spin infinite 5s linear;
      }
    }

    .stamp.empty {
      z-index: 1;
      img {
        display: none;
      }
    }
  }

  .add-stamp {
    text-align: center;
    margin: 24px 0;
  }

  .redeem {
    margin-top: 48px;
    text-align: center;

    button {
      background-color: #fc9906;
    }

    button:hover {
      background-color: #191919;
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(0deg) scale(1.24);
  }
  to {
    transform: rotate(0deg) scale(1);
  }
}
