/* ==========================================================
   CONTENT
   ========================================================== */

.content {

    display: flex;

    flex-direction: column;

    gap: 12px;
}


/* ==========================================================
   CONTENT WIDTHS
   ========================================================== */

.content-narrow {

    width: 320px;
}

.content-medium {

    width: 420px;
}

.content-wide {

    width: 560px;
}


/* ==========================================================
   CONTENT ROW
   ========================================================== */

.content-row {

    display: flex;

    gap: 12px;

    align-items: flex-start;
}


/* ==========================================================
   CONTENT FLEX
   ========================================================== */

.content-flex {

    flex: 1;
}