JoinPrompt.module.scss

.container {
    background: var(--accent);
}

.prompt {
    margin: auto;
    display: flex;
    padding: 4rem;
    overflow: hidden;
    align-items: center;
    scroll-snap-align: center;
    max-width: var(--max-width);

    .info {
        flex-grow: 1;

        h1, p {
            margin: 0;
        }

        h1 {
            font-size: 40px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        p {
            font-size: 18px;
            max-width: 400px;
        }
    }

    .actions {
        display: flex;
    }
}

@media only screen and (max-width: 768px) {
    .prompt {
        flex-direction: column;
        padding: 4rem 20px;

        .actions {
            flex-direction: column;
            width: 100%;
        }
    }

    .info {
        margin-bottom: 40px;
    }
}