minter {
  border-radius: calc(var(--radius) * 1px);
  min-width: 360px;
  padding: 1em;
  padding-top: 3em;
  position: relative;
  grid-template-rows: 1fr auto;
  box-shadow: 0 1rem 2rem -1rem black;
  display: grid;
  backdrop-filter: blur(calc(var(--cardblur, 5) * 1px));

  .form-control {
    box-sizing: border-box;
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  minter {
    min-width: unset;
    padding: 1em;
    padding-top: 2em;

    .form-control {
      box-sizing: border-box;
      width: 100%;
    }
  }
}

@media only screen and (max-width: 480px) {
  minter {
    .form-control {
      box-sizing: border-box;
      width: 100%;
    }  
  }
}
.wrapper {
    max-width: 90%;
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: 5%;
    
  }
  label {
    position: relative;
    display: block;
    margin-left: 2.5%;
    margin-right: 2.5%;
  }
  label > input {
    position: relative;
    background-color: #fff; 
    border: 1px solid #dee2e6;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0.375rem;
    outline: none;
    height: 45px;
    font-size: 1.2em;
    margin: 0 0 30px 0;
    padding: 0;
    box-shadow: none;
    box-sizing: content-box;
    transition: all .3s;
  }
  label > input:valid + span {
    transform: translateY(-5px) scale(1.0);
    transform-origin: 0;
  }
  label > input:valid {
    border-bottom: 1px solid #3F51B5;
  }
  label > span {
    color: #9e9e9e;
    position: absolute;
    top: -30px;
    left: 0;
    font-size: 1.2em;
    cursor: text;
    transition: .2s ease-out;
  }
  label > input:focus + span {
    transform: translateY(-5px) scale(1.2);
    transform-origin: 0;
    color: #3F51B5;
  }
  label > input:focus {
    border-bottom: 1px solid #3F51B5;
    box-shadow: 0 1px 0 0 #3F51B5;
  }