.container {
    max-width: 80vw;   
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-gap: 35px;
    margin: 0 auto;
    padding: 30px 0;}

    .card {
      position: relative;
      width: 300px;
      height: 400px;
      margin: 0 auto;
      background: #000;
      border-radius: 15px;
      box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);

      .face {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        &.face1 {
          box-sizing: border-box;
          padding: 20px;

          h2 {
            margin: 0;
            padding: 0;
          }

          .java {
            background-color: black;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }

          .python {
            background-color: black;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }

          .cSharp {
            background-color: black;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        &.face2 {
          transition: 0.5s;

          h2 {
            margin: 0;
            padding: 0;
            font-size: 10em;
            color: #fff;
            transition: 0.5s;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            z-index: 10;
          }
        }
      }
    }

    .card:hover .face.face2 {
      height: 60px;

      h2 {
        font-size: 2em;
      }
    }

    .card:nth-child(1) .face.face2 {
      background-image: linear-gradient(
        40deg,
        #ca6baf 0%,
        #6042d9 45%,
        #53e5e2 100%
      );
      border-radius: 15px;
    }

    .card:nth-child(2) .face.face2 {
      background-image: linear-gradient(
        40deg,
        #00fffc 0%,
        #fc00ff 45%,
        #fffc00 100%
       
      );
      border-radius: 15px;
    }

    .card:nth-child(3) .face.face2 {
      background-image: linear-gradient(
        40deg,
        #ca6baf 0%,
        #6042d9 45%,
        #53e5e2 100%
      );
      border-radius: 15px;
    }

    .card:nth-child(4) .face.face2 {
        background-image: linear-gradient(
            #00fffc 0%,
        #fc00ff 45%,
        #fffc00 100%
        );
        border-radius: 15px;
      }

      .card:nth-child(5) .face.face2 {
        background-image: linear-gradient(
          40deg,
          #ca6baf 0%,
          #6042d9 45%,
          #53e5e2 100%
        );
        border-radius: 15px;
      }

      .card:nth-child(6) .face.face2 {
        background-image: linear-gradient(
          40deg,
          #00fffc 0%,
          #fc00ff 45%,
          #fffc00 100%
        );
        border-radius: 15px;
      }

      .card:nth-child(7) .face.face2 {
        background-image: linear-gradient(
          40deg,
          #ca6baf 0%,
          #6042d9 45%,
          #53e5e2 100%
        );
        border-radius: 15px;
      }

      .card:nth-child(8) .face.face2 {
        background-image: linear-gradient(
          40deg,
          #00fffc 0%,
        #fc00ff 45%,
        #fffc00 100%
         
        );
        border-radius: 15px;
      }