region-content-below.pcss.css

Content below region layout.

File

core/themes/olivero/css/layout/region-content-below.pcss.css

View source 
  1. /**

  2.  * @file

  3.  * Content below region layout.

  4.  */

  5. 

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

  7. 

  8. .region--content-below {

  9.   @media (--md) {

  10.     display: flex;

  11.     flex-wrap: wrap;

  12. 

  13.     & > * {

  14.       flex-basis: calc(50% - (var(--grid-gap) / 2));

  15.       flex-grow: 1;

  16.       flex-shrink: 0;

  17.       margin-inline-end: var(--grid-gap);

  18. 

  19.       &:nth-child(2n),

  20.       &:last-child {

  21.         margin-inline-end: 0;

  22.       }

  23.     }

  24.   }

  25. 

  26.   @media (--md) {

  27.     & > * {

  28.       flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));

  29. 

  30.       &:nth-child(2n),

  31.       &:last-child {

  32.         margin-inline-end: var(--grid-gap);

  33.       }

  34. 

  35.       &:nth-child(3n),

  36.       &:last-child {

  37.         margin-inline-end: 0;

  38.       }

  39.     }

  40.   }

  41. }