header{
    background-color: rgb(36, 36, 36);
    display:flex;
    justify-content:center;
    align-items: center;
}

.grid-case{
    padding:7vw;
    display:grid;
    gap:1.5rem;
    align-items: center;

}



.card {
    --main-color: #000;
    --submain-color: #78858F;
    --bg-color: #fff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    position: relative;
    min-width: 25vw;
    height: 384px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    background: var(--bg-color);
  }
  
  .card__img {
    height: 192px;
    width: 100%;
  }
  
  .card__img svg {
    height: 100%;
    border-radius: 20px 20px 0 0;
  }
  
  .card__avatar {
    position: absolute;
    width: 114px;
    height: 114px;
    background: var(--bg-color);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: calc(50% - 57px);
  }
  
  .card__avatar svg {
    width: 100px;
    height: 100px;
  }
  
  .card__title {
    margin-top: 60px;
    font-weight: 500;
    font-size: 18px;
    color: var(--main-color);
  }
  
  .card__subtitle {
    margin-top: 10px;
    font-weight: 400;
    font-size: 15px;
    color: var(--submain-color);
  }
.card__btnn:hover{
    cursor:pointer;
}
.card__btn:hover{
    cursor:pointer;
}
  .card__wrapper{
    margin-top:.25rem;
    display: flex;
    justify-items: center;
    align-items: center;
    gap:.5rem;
  }

  .card__btn {
    margin-top: 15px;
    width: 76px;
    height: 39px;
    border: 2px solid var(--main-color);
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    color: var(--main-color);
    background: var(--bg-color);
    text-transform: uppercase;
    transition: all 0.3s;
  }
  
  .card__btn-solid {
    background: var(--main-color);
    color: var(--bg-color);
  }
  
  .card__btn:hover {
    background: var(--main-color);
    color: var(--bg-color);
  }
  
  .card__btn-solid:hover {
    background: var(--bg-color);
    color: var(--main-color);
  }

.DevInfo{
    grid-row:'one';
}
.SingUp{

    grid-row:'two';
}

@media (min-width: 60rem){
    .grid-case{
        grid-template-areas:
        'one two two';
    }
    .SingUp{
        width: 50vw;
    }


}