.band {
      width: 90%;
      max-width: 1240px;
      margin: 0 auto;

      display: grid;

      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-gap: 20px;

      @media (min-width: 30em) {
        grid-template-columns: 1fr 1fr;
      }

      @media (min-width: 60em) {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .card-blog {
      background: rgb(28, 28, 28);
      text-decoration: none;
      color: #ffffff;
      box-shadow: 0 2px 5px rgba(17, 20, 18, 0.49);
      display: flex;
      flex-direction: column;
      min-height: 100%;

      border-radius: 16px;
      overflow: hidden;

      // sets up hover state
      position: relative;
      top: 0;
      transition: all .1s ease-in;

      &:hover {
        top: -2px;
        box-shadow: 0 4px 5px rgba(84, 231, 150, 0.49);
      }

      article {
        padding: 20px;
        flex: 1;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      h1 {
        font-size: 20px;
        margin: 0;
        color: #ffffff;
      }

      p {
        flex: 1;
        line-height: 1.4;
      }

      span {
        font-size: 12px;
        font-weight: bold;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: .05em;
        margin: 2em 0 0 0;
      }

      .thumb {
        padding-bottom: 60%;
        background-size: cover;
        background-position: center center;
      }
    }

    .item-1 {
      @media (min-width: 60em) {
        grid-column: 1 / span 2;

        h1 {
          font-size: 24px;
        }
      }
    }

 .badge-card {
  display: inline-block;
  width: 90px;;
  height: 25px;
  padding: 0.4em 0.8em;
  font-size: 0.85rem;
  margin-top: 0.5rem;
  background-color: #12e58b; /* Color personalizado */
  color: #000; /* O #fff, según el contraste que prefieras */
  border-radius: 50px; /* Para simular el efecto de rounded-pill */
}