/* landing-specific */
main {
    border: none !important;
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr;
    color: var(--hds-color-base-lightest);
}
.standalone-bg-image {
    display: none;
}

.cta-area {
    background-image: url("/img/jwst-cosmic-cliffs.png");
    background-size: cover;
    padding: 1.25rem; /* arbitrary; match mock-up */
    display: flex;
    justify-content: start;
    align-items: end;
}

.cta-content {
    max-width: 21rem; /* arbitrary; match mock-up */
    display: flex;
    flex-direction: column;
    gap: var(--hds-spacing-4);
}

.login-button-logo {
    margin-top: .125em;
}

@media (min-width: 640px) {
    main {
        color: var(--hds-color-base-darkest);
        grid-template-rows: 1fr auto auto;
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "cta"
            "legal";
    }

    .cta-area {
        grid-area: cta;
        background-image: none;
        justify-content: center;
        align-items: center;
        padding: 4rem;
    }

    .image-area {
        grid-area: image;
    }

    .legal-area {
        grid-area: legal;
    }

    .standalone-bg-image {
        display: block;
        background-image: url("/img/jwst-cosmic-cliffs.png");
        background-size: cover;
    }

    .cta-content {
        max-width: 44.125rem;
    }
}

@media (min-width: 1024px) {
    main {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto;
        grid-template-areas:
        "cta image"
        "legal legal";
    }

    .standalone-bg-image {
        height: 100%;
    }

    .cta-content {
        max-width: 26.25rem;
    }
}

@media (min-width: 1400px) {
    .cta-content {
        max-width: 40rem;
    }
}