.auth {
    max-width: 765px;
    margin: 0 auto;
}

.auth-v2 {
    display: grid;
    grid-template: auto / 1fr;
    gap: 20px;
}

.auth-v2-top {}
.auth-v2-bottom {padding: 20px 0;}

.auth-form {display: grid; gap: 12px; grid-template: auto / repeat(2, 1fr); overflow: hidden;}
.auth-form-row {grid-column: 1 / span 2;}

.auth-form-picture,
.auth-form-picture img {
    display: block;
    vertical-align: bottom;
    border: none;
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 333 / 179;
    background: var(--book_primary-color-two);
}

@media (min-width: 768px) {
    .auth-form-picture,
    .auth-form-picture img {
        aspect-ratio: 375 / 589;
    }
}

@media (min-width: 768px) {
    .auth-v2 {
        grid-template: auto / 375px 1fr;
    }

    .auth-v2-top {min-height: 400px;}
    .auth-v2-bottom {align-self: center;}
}

.auth-cta-google,
.auth-cta-facebook {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    text-decoration: none;
    text-align: center;
    border: 2px solid var(--book_primary-color-four);
    padding: 12px 0;
    border-radius: 6px;
}

.auth-cta-google:hover,
.auth-cta-facebook:hover {
    border-color: var(--book_secondary-color-one);
}

.auth-cta-icon {display: inline-block; vertical-align: top; width: 20px; height: 20px; background: transparent center center no-repeat; background-size: contain; padding: 0 1px;}
.auth-cta-txt {display: inline-block; vertical-align: top; padding: 0 1px;}

.auth-cta-google .auth-cta-icon {background-image: url('/media/images/auth/google.png');}
.auth-cta-facebook .auth-cta-icon {background-image: url('/media/images/auth/facebook.png');}