style.css 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. html,
  2. body {
  3. height: 100%;
  4. background: #f2f2f2;
  5. }
  6. *,
  7. *:before,
  8. *:after {
  9. box-sizing: border-box;
  10. }
  11. /* Container
  12. ---------------------------------------------------------------------- */
  13. .container {
  14. padding: 1rem .5rem;
  15. overflow: hidden;
  16. }
  17. /* Target Elements
  18. ---------------------------------------------------------------------- */
  19. .mix {
  20. float: left;
  21. margin: 0 .5rem 1rem;
  22. background: #fff;
  23. border-radius: 2px;
  24. position: relative;
  25. }
  26. .mix:before {
  27. content: '';
  28. display: inline-block;
  29. padding-top: 56.25%;
  30. }
  31. /* Grid Breakpoints
  32. ---------------------------------------------------------------------- */
  33. /* 2 Columns */
  34. .mix {
  35. width: calc(50% - 1rem);
  36. }
  37. /* 3 Columns */
  38. @media screen and (min-width: 541px) {
  39. .mix {
  40. width: calc(100%/3 - 1rem);
  41. }
  42. }
  43. /* 4 Columns */
  44. @media screen and (min-width: 961px) {
  45. .mix,
  46. .gap {
  47. width: calc(100%/4 - 1rem);
  48. }
  49. }
  50. /* 5 Columns */
  51. @media screen and (min-width: 1281px) {
  52. .mix,
  53. .gap {
  54. width: calc(100%/5 - 1rem);
  55. }
  56. }