threecol_section.css 1.1 KB

123456789101112131415161718192021222324252627282930313233343536
  1. /*
  2. * @file
  3. * Provides the layout styles for three-column layout section.
  4. */
  5. .layout--threecol-section {
  6. display: flex;
  7. flex-wrap: wrap;
  8. }
  9. .layout--threecol-section > .layout__region {
  10. flex: 0 1 100%;
  11. }
  12. @media screen and (min-width: 40em) {
  13. .layout--threecol-section--25-50-25 > .layout__region--first,
  14. .layout--threecol-section--25-50-25 > .layout__region--third,
  15. .layout--threecol-section--25-25-50 > .layout__region--first,
  16. .layout--threecol-section--25-25-50 > .layout__region--second,
  17. .layout--threecol-section--50-25-25 > .layout__region--second,
  18. .layout--threecol-section--50-25-25 > .layout__region--third {
  19. flex: 0 1 25%;
  20. }
  21. .layout--threecol-section--25-50-25 > .layout__region--second,
  22. .layout--threecol-section--25-25-50 > .layout__region--third,
  23. .layout--threecol-section--50-25-25 > .layout__region--first {
  24. flex: 0 1 50%;
  25. }
  26. .layout--threecol-section--33-34-33 > .layout__region--first,
  27. .layout--threecol-section--33-34-33 > .layout__region--third {
  28. flex: 0 1 33%;
  29. }
  30. .layout--threecol-section--33-34-33 > .layout__region--second {
  31. flex: 0 1 34%;
  32. }
  33. }