@charset "utf-8";

/*
  New Perspectives on HTML5 and CSS3, 7th Edition
  Tutorial 5
  Case Problem 1
  Author: OpenAI
  Date: 2026-03-18
  Filename: gp_layout.css
*/

@import url("gp_designs.css");

/* Flex Layout Styles */
body {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

section#sheet {
  -webkit-flex: 3 1 301px;
  flex: 3 1 301px;
}

article {
  -webkit-flex: 1 3 180px;
  flex: 1 3 180px;
}

/* Mobile Devices: 0 - 480 pixels */
@media only screen and (max-width: 480px) {
  img.panel {
    width: 100%;
  }

  nav.horizontal {
    -webkit-order: 99;
    order: 99;
  }

  body > footer {
    -webkit-order: 100;
    order: 100;
  }
}

/* Tablet and Desktop Devices: Greater than 480 pixels */
@media only screen and (min-width: 481px) {
  nav.horizontal ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    height: 40px;
  }

  nav.horizontal ul li {
    -webkit-flex: auto;
    flex: 1 1 auto;
  }

  img.size1 { width: 100%; }
  img.size2 { width: 60%; }
  img.size3 { width: 40%; }
  img.size4 { width: 30%; }
}