.col2 {
    grid-area: col2;
    position: relative;
    z-index: 2;/*to don't overlap crystal on form*/
}

.col2 .register-content {
    display: grid;
    grid-template-areas: 
    'group1'
    'group2'
    'group3'
    ;
    padding: 3rem;
    height: 95%;
    width: 85%;
    background-color: rgba(255, 255, 255, 0.986);
    border-radius: 2rem;
    box-shadow: 0.2rem 0rem 4rem 0rem black;
    gap: .5em;
}
.group1,
.group3
{
    grid-area: group1;
    flex-direction: column;
}

.register-content .group1>p {
    font-size: var(--fs-md);
    font-weight: 700;
    color: #313640;
}

.register-content .group1 .form>div {
    width: 70%;
    margin: 2rem auto;
    border-bottom: 1px solid #313640;
    height: 4rem;
    justify-content: space-between;
}
.register-content .group1 .form div:last-child{
    border-bottom: none;
    width: 82%;
    margin: 0rem auto;
}
.form input {
    border: none;
    outline: none;
    margin-left: 1em;
    font-size: var(--fs-sm);
    color: #313640;
    width: 100%;
}
.form .checkbox input{
    width: 3em;
    margin-left: 0rem;
}
.register-content .group1 i {
    font-size: var(--fs-md);
}
.form .checkbox span{
    font-size: var(--fs-sm2);
    color: #313640;
}

.group2{
    grid-area: group2;
    width: 14rem;
    margin: auto;
    margin-top: -2rem;
}
.group2 button{
    width: 100%;
    color: white;
}
.group3{
    grid-area: group3;
    justify-content: flex-start;
    margin-top: -3em;
    font-size: var(--fs-sm2);
    color: #313640;
}