/* Border box declaration 
https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html {
  box-sizing: border-box;
}
/* inherit border-box on all elements in the universe and before and after */
*,
*: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;
}

/* give margin between columns and apply styles to flex items */
[class*="col-"] {
  margin-left: 4%;
  flex: 0 0 92%;
}

/* background colors (match the screenshots layout, theme updated) */
.col-1 {
  background-color: #A3CDD9;
}

.col-2 {
  background-color: #FFFCE6;
}

/* 3-column wide item (desktop) */
.col-3 {
  background-color: #F3D34A;
}

/* 4-column wide item (full width) */
.col-4 {
  background-color: #C8BFB5;
}

/* row 6 smaller cards */
.col-5 {
  background-color: #EAE8FF;
}

/* Tablet Landscape Screen Sizes */
@media only screen and (min-width: 480px) {

  .col-1,
  .col-2 {
    flex: 0 0 44%;
  }

  /* Row 3 stacks on tablet */
  .row3 .col-1,
  .row3 .col-3 {
    flex: 0 0 92%;
  }

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

  /* Row 5: show Pudding first (full width), then Bean + Ink side-by-side */
  .row5 .item-pudding {
    flex: 0 0 92%;
    order: 1;
  }

  .row5 .item-bean {
    order: 2;
  }

  .row5 .item-ink {
    order: 3;
  }

  /* Row 6: 2 cards per row (wrap) */
  .row6 {
    justify-content: space-between;
  }
  .row6 .col-5 {
    flex: 0 0 44%;
  }
  .row6 .col-5:last-child {
    flex: 0 0 92%;
  }
}

/* Desktop screen Sizes */
@media only screen and (min-width: 768px) {

  .col-1 {
    flex: 0 0 20%;
  }

  .col-2 {
    flex: 0 0 44%;
  }

  .col-3 {
    flex: 0 0 68%;
  }

  .col-4 {
    flex: 0 0 92%;
  }

  /* Row 5: restore 1-2-1 order on desktop */
  .row5 .item-bean {
    order: 1;
  }
  .row5 .item-pudding {
    order: 2;
    flex: 0 0 44%;
  }
  .row5 .item-ink {
    order: 3;
  }

  /* Row 6: 5 items per row (unique from other rows) */
  .row6 {
    justify-content: space-between;
    align-items: stretch;
  }
  .row6 .col-5 {
    flex: 0 0 16%;
  }
}