:root {
  --cs-h: 40vh;
  --cs-w: calc(var(--cs-h) / 1.6);
}


      .character-card-container {
        /* border: 2px solid #17aacb; */
        width: 90vw;
        margin: 5vh auto;
        display: flex;
        column-gap: 2vw;
      }

      .character-card-border {
        border: 3px solid #4f4f4f;
        width: var(--cs-w);
        max-width: 90%;
        height: var(--cs-h);
        padding: 0.45vh 0.45vw;

        transition: border 0.5s, box-shadow 0.6s ease-out;
      }
      .character-card-border:hover {
        border: 3px solid #32cd32;
        box-shadow: 0 0 15px 1px #32cd32;
      }

      .character-card-border-none {
        border:3px solid transparent;
        width: var(--cs-w);
        max-width: 90%;
        height: var(--cs-h);
        padding: 0.45vh 0.45vw;

        transition: border 0.5s, box-shadow 0.6s ease-out;
      }
      .character-card-border-none:hover {
        border: 3px solid #33b1c9;
        box-shadow: 0 0 15px 1px #33b1c9;
      }

      .character-card-picture-transition {
        transition: opacity 0.5s ease-in;
        
      }
      .character-card-content {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

      .character-card-gradient {
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to top, #32cd32d9 0%, transparent 40%, transparent);
        transform: translateY(50%);

        transition: transform 0.6s ease-out;
      }

      .character-card-gradient-blue {
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to top, #33b1c9d9 0%, transparent 40%, transparent);
        transform: translateY(50%);

        transition: transform 0.6s ease-out;
      }

      .character-card-border:hover .character-card-gradient {
        transform: translateY(0%);
      }
      .character-card-border:hover .character-card-gradient-blue {
        transform: translateY(0%);
      }

      .character-card-border-none:hover .character-card-gradient {
        transform: translateY(0%);
      }
      .character-card-border-none:hover .character-card-gradient-blue {
        transform: translateY(0%);
      }

      .character-card-border:nth-child(n) .character-card-content {
        background-repeat: no-repeat;
        background-size: var(--cs-w) var(--cs-h);
      }

      .character-flex-autofilled {

      }

      .character-flex-autofilled::after {
          content: "";
          flex: auto;
      }
      /*
      .character-card-border:nth-child(1) .character-card-content {
        background-image: url(./img/char-1.avif);
        background-position: 90%;
      }

      .character-card-border:nth-child(2) .character-card-content {
        background-image: url(./img/char-2.avif);
        background-position: center center;
      }

      .character-card-border:nth-child(3) .character-card-content {
        background-image: url(./img/char-3.avif);
        background-position: 60%;
      }

      .character-card-border:nth-child(4) .character-card-content {
        background-image: url(./img/char-4.avif);
        background-position: 60%;
      }

      .character-card-border:nth-child(5) .character-card-content {
        background-image: url(./img/char-5.avif);
        background-position: 50%;
      }
      */