hero.css

Main Hero.

File

core/themes/olivero/css/components/hero.css

View source 
  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. /**

  9.  * @file

  10.  * Main Hero.

  11.  */

  12. 

  13. .hero__content {

  14.   grid-column: 1 / 7;

  15. }

  16. 

  17. @media (min-width: 43.75rem) {

  18.   .hero__content {

  19.     /* 700px */

  20.     grid-column: 3 / 13;

  21.   }

  22. }

  23. 

  24. @media (min-width: 62.5rem) {

  25.   .hero__content {

  26.     grid-column: 3 / 11;

  27.   }

  28. }

  29. 

  30. .hero__img {

  31.   grid-column: 1 / 7;

  32.   margin-block-start: var(--sp2);

  33.   margin-block-end: var(--sp2);

  34. }

  35. 

  36. .hero__img img {

  37.   width: 100%;

  38. }

  39. 

  40. @media (min-width: 31.25rem) {

  41.   .hero__img {

  42.     margin-block-start: var(--sp3);

  43.     margin-block-end: var(--sp3);

  44.   }

  45. }

  46. 

  47. @media (min-width: 43.75rem) {

  48.   .hero__img {

  49.     grid-column: 1 / 15;

  50.     margin-block-start: var(--sp4);

  51.     margin-block-end: var(--sp4);

  52.   }

  53. }

  54. 

  55. @media (min-width: 62.5rem) {

  56.   .hero__img {

  57.     grid-column: 2 / 14;

  58.   }

  59. }