_features.scss 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. // Modular Showcase styling
  2. .modular {
  3. .features {
  4. padding: 6rem 0;
  5. text-align: center;
  6. @include clearfix;
  7. h2 {
  8. margin: 0;
  9. line-height: 100%;
  10. }
  11. p {
  12. margin: 1rem 0;
  13. font-size: $core-font-size + 0.2rem;
  14. @include breakpoint(mobile-only) {
  15. font-size: $core-font-size;
  16. }
  17. }
  18. .feature-items {
  19. margin-top: 2rem;
  20. @supports not (flex-wrap: wrap) {
  21. overflow: hidden;
  22. }
  23. }
  24. .feature {
  25. display:block;
  26. float: left;
  27. width: 25%;
  28. vertical-align: top;
  29. margin-top: 2rem;
  30. margin-bottom: 1rem;
  31. @include breakpoint(large-mobile-range) {
  32. margin-top: 1rem;
  33. width: 50%;
  34. }
  35. @include breakpoint(small-mobile-range) {
  36. margin-top: 1rem;
  37. width: 100%;
  38. }
  39. i.fa {
  40. font-size: 2rem;
  41. color: $core-accent;
  42. }
  43. h4 {
  44. margin: 0;
  45. font-size: 1.1rem;
  46. }
  47. p {
  48. display: inline-block;
  49. font-size: $core-font-size;
  50. margin: 0.2rem 0 1rem;
  51. }
  52. }
  53. &.big {
  54. text-align: center;
  55. .feature {
  56. width: 50%;
  57. @include breakpoint(small-mobile-range) {
  58. margin-top: 1rem;
  59. width: 100%;
  60. }
  61. }
  62. i.fa {
  63. font-size: 3rem;
  64. float: left;
  65. }
  66. .feature-content {
  67. padding-right: 2rem;
  68. &.icon-offset {
  69. margin-left: 5rem;
  70. }
  71. h4 {
  72. font-size: 1.3rem;
  73. text-align: left;
  74. }
  75. p {
  76. padding: 0;
  77. text-align: left;
  78. }
  79. }
  80. }
  81. }
  82. }