@charset "utf-8";
/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 3
   Tutorial Case

   Style Sheet for Grids used in the Pandaisia Chocolates website
   Author: Brandon LaDuke
   Date:   2/7/2019

   Filename: pc_grids.css

*/


/* Grid Rows Styles */
div.row {
  clear: both;
}
div.row::after {
  content: "";
  clear: both;
  display: table;
}



/* Grid Columns Styles */
div[class^="col-"] {
  float: left;
}
div.col-1-1 {
  width: 100%;
}
div.col-1-2 {
  width: 50%;
}
div.col-1-3 {
  width: 33.33%;
}
div.col-2-3 {
  width: 66.67%;
}
div.col-1-4 {
  width: 25%;
}
div.col-3-4 {
  width: 75%;
}




/* Grid Outline Styles */
div {
  outline: 1px solid red;
}