_galleries.scss 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. .gallery {
  2. margin: 0 -#{$gutter} $baseline;
  3. }
  4. .gallery-item {
  5. display: inline-block;
  6. margin: ( $gutter * .5 );
  7. text-align: center;
  8. vertical-align: top;
  9. width: 100%;
  10. a {
  11. display: block;
  12. line-height: 0;
  13. }
  14. .gallery-columns-2 & {
  15. max-width: calc( 50% - #{$gutter} );
  16. }
  17. .gallery-columns-3 & {
  18. max-width: calc( 33.33% - #{$gutter} );
  19. }
  20. .gallery-columns-4 & {
  21. max-width: calc( 25% - #{$gutter} );
  22. }
  23. .gallery-columns-5 & {
  24. max-width: calc( 20% - #{$gutter} );
  25. }
  26. .gallery-columns-6 & {
  27. max-width: calc( 16.66% - #{$gutter} );
  28. }
  29. .gallery-columns-7 & {
  30. max-width: calc( 14.28% - #{$gutter} );
  31. }
  32. .gallery-columns-8 & {
  33. max-width: calc( 12.5% - #{$gutter} );
  34. }
  35. .gallery-columns-9 & {
  36. max-width: calc( 11.11% - #{$gutter} );
  37. }
  38. }
  39. .gallery-icon {
  40. }
  41. .gallery-caption {
  42. @include body-copy-small();
  43. display: block;
  44. font-family: $font__main;
  45. margin-top: ( $baseline * .5 );
  46. margin-bottom: $baseline;
  47. }
  48. @include breakpoint( mobileonly ) {
  49. .gallery {
  50. margin: 0 0 $baseline;
  51. }
  52. }