hero.pcss.css

Main Hero.

File

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

View source 
  1. /**

  2.  * @file

  3.  * Main Hero.

  4.  */

  5. 

  6. @import "../base/media-queries.pcss.css";

  7. 

  8. .hero__content {

  9.   grid-column: 1 / 7;

  10. 

  11.   @media (--grid-md) {

  12.     /* 700px */

  13.     grid-column: 3 / 13;

  14.   }

  15. 

  16.   @media (--lg) {

  17.     grid-column: 3 / 11;

  18.   }

  19. }

  20. 

  21. .hero__img {

  22.   grid-column: 1 / 7;

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

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

  25. 

  26.   & img {

  27.     width: 100%;

  28.   }

  29. 

  30.   @media (--sm) {

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

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

  33.   }

  34. 

  35.   @media (--grid-md) {

  36.     grid-column: 1 / 15;

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

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

  39.   }

  40. 

  41.   @media (--lg) {

  42.     grid-column: 2 / 14;

  43.   }

  44. }