hero.css 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Main Hero.
  10. */
  11. .hero__content {
  12. -ms-grid-column: 1;
  13. -ms-grid-column-span: 6;
  14. grid-column: 1 / 7;
  15. }
  16. @media (min-width: 43.75rem) {
  17. .hero__content { /* 700px */
  18. -ms-grid-column: 3;
  19. -ms-grid-column-span: 10;
  20. grid-column: 3 / 13;
  21. }
  22. }
  23. @media (min-width: 62.5rem) {
  24. .hero__content {
  25. -ms-grid-column: 3;
  26. -ms-grid-column-span: 8;
  27. grid-column: 3 / 11;
  28. }
  29. }
  30. .hero__img {
  31. -ms-grid-column: 1;
  32. -ms-grid-column-span: 6;
  33. grid-column: 1 / 7;
  34. margin-top: 2.25rem;
  35. margin-bottom: 2.25rem;
  36. }
  37. .hero__img img {
  38. width: 100%;
  39. }
  40. @media (min-width: 31.25rem) {
  41. .hero__img {
  42. margin-top: 3.375rem;
  43. margin-bottom: 3.375rem;
  44. }
  45. }
  46. @media (min-width: 43.75rem) {
  47. .hero__img {
  48. -ms-grid-column: 1;
  49. -ms-grid-column-span: 14;
  50. grid-column: 1 / 15;
  51. margin-top: 4.5rem;
  52. margin-bottom: 4.5rem;
  53. }
  54. }
  55. @media (min-width: 62.5rem) {
  56. .hero__img {
  57. -ms-grid-column: 2;
  58. -ms-grid-column-span: 12;
  59. grid-column: 2 / 14;
  60. }
  61. }