.section-auth { height: calc(100% - 20px); background-color: #6b27ff; position: relative; display: flex; align-items: center; justify-content: center; }
.section-auth .wrapper { background-color: #fff; border-radius: 40px; padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; scale: 0.9; align-items: center; }

.section-auth .wrapper .left { display: flex; flex-direction: column; align-items: center; gap: 30px; height: 100%; justify-content: center; gap: 50px; }
.section-auth .wrapper .left .top { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 24px; color: #494949; }
.section-auth .wrapper .left .top .logo { width: 212px; }

.section-auth .wrapper .left .break { width: 300px; height: 1px; background-color: #00000033; }

.section-auth .wrapper .left .bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 0px 40px; }
.section-auth .wrapper .left .bottom .top { display: flex; flex-direction: row; gap: 0px; align-items: center; font-weight: 700; margin-top: 0px; }


.section-auth .wrapper .left .bottom .top .icon { cursor: pointer; transition: scale 0.5s; display: flex; }
.section-auth .wrapper .left .bottom .top .icon:hover { scale: 1.12; }

.section-auth .wrapper .left .bottom .top .collapse { display: grid; margin-left: 30px; justify-items: center; }
.section-auth .wrapper .left .bottom .top .collapse > * { grid-area: 1 / 1; }
.section-auth .wrapper .left .bottom .top .collapse .bottom { padding: 0px; display: grid; grid-template-columns: 1fr 1fr; width: 130px; justify-items: center; }

.section-auth .wrapper .left .bottom { height: 100%; gap: 32px; }
.section-auth .wrapper .left .bottom .mid { margin-top: 12px; text-align: center; color: #494949; }
.section-auth .wrapper .left .bottom .bottom { display: flex; flex-direction: column; gap: 12px; width: 100%; justify-content: space-between; }
.section-auth .wrapper .left .bottom .bottom .slice { display: flex; flex-direction: column; gap: 12px; width: 100%; align-items: center; }
.section-auth .wrapper .left .bottom .bottom .slice .row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; }
.section-auth .wrapper .left .bottom .bottom .slice .row.single { display: flex; justify-content: center; min-width: 358px; }
.section-auth .wrapper .left .bottom .bottom .slice .row.single .global-input-group { min-width: 358px; }
.section-auth .wrapper .left .bottom .bottom .slice .row .recovery { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; color: #494949; transition: color 0.4s; text-decoration: none; }
.section-auth .wrapper .left .bottom .bottom .slice .row .recovery * { transition: fill 0.4s; }
.section-auth .wrapper .left .bottom .bottom .slice .row .recovery:hover { color: #6927ff; }
.section-auth .wrapper .left .bottom .bottom .slice .row .recovery:hover * { fill: #6927ff; }
.section-auth .wrapper .left .bottom .bottom .global-btn-primary.auth { padding: 20px 94px; }
.section-auth .wrapper .left .bottom .bottom .slice .bottom { display: flex; flex-direction: row; align-items: center; justify-content: center; font-weight: 700; color: #494949; margin-top: 16px; }
.section-auth .wrapper .left .bottom .bottom .slice .bottom a { display: flex; justify-content: center; align-items: center; gap: 6px; color: #6b27ff; text-decoration: none; transition: color 0.3s; }
.section-auth .wrapper .left .bottom .bottom .slice .bottom a * { transition: stroke 0.3s; }
.section-auth .wrapper .left .bottom .bottom .slice .bottom a:hover { color: #9fc119; }
.section-auth .wrapper .left .bottom .bottom .slice .bottom a:hover * { stroke: #9fc119; }
 


.section-auth .wrapper .right { border-radius: 40px;  }
.section-auth .wrapper .right .desktop img { width: 100%; height: fit-content; object-fit: contain; object-position: top; }


@media all and (max-width: 1600px) {
    .section-auth .wrapper { padding: 20px; }
}

@media all and (max-width: 1400px) {
    .section-auth .wrapper .left .bottom { padding: 0px 20px; }
}

@media all and (max-width: 1300px) {
    .section-auth .wrapper { gap: 10px; }
}

@media all and (max-width: 1100px) {
    .section-auth .wrapper { display: flex; flex-direction: column-reverse; padding: 40px; }
    .section-auth .wrapper .right .desktop { display: none; }
}

@media all and (max-width: 767px) {
    .section-auth .wrapper .left .bottom { padding: 0px; }
    .section-auth .wrapper .left .bottom .bottom .row { grid-template-columns: 1fr; gap: 18px; }
    .section-auth .wrapper .left .bottom .bottom button { padding: 20px 0px; width: 100%; }
    .section-auth .wrapper .left .break { width: 100%; }
    .section-auth .wrapper .left .bottom .top .collapse { margin-left: 15px; }

}

@media all and (max-width: 440px) {
    .section-auth .wrapper .left .bottom .bottom .slice .row.single { min-width: 0px; width: 100%; }
    .section-auth .wrapper .left .bottom .bottom .slice .row.single .global-input-group { min-width: 0px; width: 100%; }
    .section-auth .wrapper .left .bottom .bottom .global-btn-primary.auth { min-width: 100%; padding: 20px 0px; }

}