/* ================================
   ROMA APP PAGE
================================ */

.roma-app-page {
    margin-left: 250px;
    width: calc(100% - 250px);
}

/* ================================
   CONTAINER
================================ */

.roma-app-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

.roma-app-divider {
    height: 1px;
    width: 80px;
    background: #B09E80;
    margin: 20px auto;
}

/* ================================
   QR + STORE COLUMNS
================================ */

.roma-app-columns {
    display: flex;
    justify-content: center;
    gap: 80px;
    align-items: flex-start;
    margin-top: 20px;
}

.roma-app-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* QR */
.roma-app-qr {
    width: 140px;
    margin: 20px 0 10px 0;
}

/* Store badge */
.store-badge {
    width: 180px;
    margin-bottom: 20px;
}

/* ================================
   STRIPE DIVIDER
================================ */

.roma-app-stripe {
    width: 100%;
    height: 80px;
    background: #F6F4EF;
    margin: 40px 0;
}

/* ================================
   FEATURES
================================ */

.roma-app-feature-list {
    text-align: left;
    max-width: 500px;
    margin: 0 auto;
}

/* ================================
   MOBILE
================================ */

@media (max-width: 768px) {

    .roma-app-page {
        margin-left: 0;
        width: 100%;
    }

    .roma-app-columns {
        flex-direction: column;
        gap: 40px;
    }

    .roma-app-stripe {
        height: 60px;
    }
}