/* Border box declaration 
https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html {
  box-sizing: border-box;
}
*, 
*:before, 
*:after {
  box-sizing: inherit;
}

body {
  font-family: Arial, Geneva, sans-serif;
}

a {
  color: #2772B0;
}

.wrapper {
  width: 97%;
  max-width: 1200px;
  margin: 0 auto;
  float: none;
  background-color: #fff;
}

div img {
  width: 100%;
  max-width: 225px;
}

/* ============================================
   GRID SYSTEM — Mobile First
   ============================================ */

/* Flex container */
.row {
  display: flex;
  flex-flow: row wrap;
}

/* All columns: full width on mobile, with left margin */
[class*="col-"] {
  margin-left: 4%;
  flex: 0 0 92%; /* full width minus margin on mobile */
}

/* ============================================
   BACKGROUND COLORS
   ============================================ */
.col-1 { background-color: #A3CDD9; }
.col-2 { background-color: #FFFCE6; }
.col-3 { background-color: #D4EDDA; }  /* light green for the wide column */
.col-4 { background-color: #F5E6FF; }  /* light purple for full-width row */

/* Row 6 unique color */
.col-auto { background-color: #FFE8CC; } /* light orange */


/* ============================================
   TABLET — min-width: 480px
   ============================================ */
@media only screen and (min-width: 480px) {

  /* Row 1: 2 columns per row on tablet */
  .col-1 {
    flex: 0 0 44%;
  }

  /* Row 2: 2 columns per row on tablet */
  .col-2 {
    flex: 0 0 44%;
  }

  /* Row 3: both items stack full width on tablet */
  .col-3 {
    flex: 0 0 44%;
  }

  /* Row 4: full width on tablet */
  .col-4 {
    flex: 0 0 92%;
  }

  /* Row 6: 2 per row on tablet */
  .col-auto {
    flex: 0 0 44%;
  }

}


/* ============================================
   DESKTOP — min-width: 768px
   ============================================ */
@media only screen and (min-width: 768px) {

  /* Row 1: 4 equal columns 
     4 items * 20% + 4 margins * 4% = 80% + 16% = 96% ✓ */
  .col-1 {
    flex: 0 0 20%;
  }

  /* Row 2: 2 items, each taking ~44% 
     2 * 44% + 2 * 4% = 96% ✓ */
  .col-2 {
    flex: 0 0 44%;
  }

  /* Row 3: col-1 (20%) + col-3 (68%) = 88% + 2 margins (8%) = 96% ✓ */
  .col-3 {
    flex: 0 0 68%;
  }

  /* Row 4: one item, nearly full width */
  .col-4 {
    flex: 0 0 92%;
  }

  /* Row 5: col-1 (20%) + col-2 (44%) + col-1 (20%) = 84% + 3 margins (12%) = 96% ✓ */
  /* (order properties handle reordering — see below) */

  /* Row 6: 5 equal columns on desktop
     Using flex-grow instead of fixed flex-basis — items grow to fill space equally.
     5 items each start at 0 and grow with flex-grow: 1 */
  .col-auto {
    flex: 1 1 13%; /* grow equally, base ~13% so 5 fit on one line */
    min-width: 120px;
  }

}


/* ============================================
   ROW 5 — ORDER PROPERTY
   On desktop: left(col-1) | middle(col-2) | right(col-1)  → no reorder needed
   On tablet/mobile: middle item (Remy) appears FIRST
   We use the CSS `order` property to achieve this.
   ============================================ */

/* Mobile & tablet: reorder so middle col-2 shows first */
.order-middle {
  order: -1; /* appears before the two side items */
}

/* Desktop: restore natural order */
@media only screen and (min-width: 768px) {
  .order-middle {
    order: 0;
  }
  .order-side {
    order: 0;
  }
}