teaser.pcss.css

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

.teaser {
  position: relative; /* Anchor after pseudo-element. */
  padding-block-end: var(--sp1-5);

  &::after {
    position: absolute;
    inset-block-end: 0;
    width: var(--sp3);
    height: 0;
    content: "";
    /* Intentionally not using CSS logical properties. */
    border-top: solid 2px var(--color--gray-95);
  }

  @media (--lg) {
    padding-block-end: var(--sp3);
  }
}

.teaser__content {
  display: grid;
  grid-auto-rows: max-content;
  gap: var(--sp);

  .field:not(:last-child) {
    margin-block-end: 0;
  }

  @media (--lg) {
    gap: var(--sp2);
  }
}

.teaser__image {
  flex-shrink: 0;
  margin: 0;

  &:empty {
    display: none;

    & + .teaser__title {
      flex-basis: auto;
    }
  }

  & a {
    display: block;
  }

  & img {
    width: var(--sp3-5);
    height: var(--sp3-5);
    object-fit: cover;
    border-radius: 50%;

    @media (--lg) {
      width: var(--grid-col-width);
      height: var(--grid-col-width);
    }
  }

  @media (--lg) {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
    margin: 0;
  }
}

.teaser__meta {
  margin-block-end: var(--sp);
}

.teaser__title {
  margin-block: 0;
  flex-basis: calc(100% - var(--sp4-5));
  color: var(--color-text-neutral-loud);
  font-size: 24px;
  line-height: var(--line-height-base);

  @media (--lg) {
    flex-basis: auto;
    font-size: var(--sp2);
    line-height: var(--sp3);
  }
}

.teaser__top {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  gap: var(--sp1);
  margin-block-end: var(--sp1);

  @media (--lg) {
    position: relative; /* Anchor the image */
  }
}

File

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

View source 
  1. @import "../../css/base/media-queries.pcss.css";

  2. 

  3. .teaser {

  4.   position: relative; /* Anchor after pseudo-element. */

  5.   padding-block-end: var(--sp1-5);

  6. 

  7.   &::after {

  8.     position: absolute;

  9.     inset-block-end: 0;

  10.     width: var(--sp3);

  11.     height: 0;

  12.     content: "";

  13.     /* Intentionally not using CSS logical properties. */

  14.     border-top: solid 2px var(--color--gray-95);

  15.   }

  16. 

  17.   @media (--lg) {

  18.     padding-block-end: var(--sp3);

  19.   }

  20. }

  21. 

  22. .teaser__content {

  23.   display: grid;

  24.   grid-auto-rows: max-content;

  25.   gap: var(--sp);

  26. 

  27.   .field:not(:last-child) {

  28.     margin-block-end: 0;

  29.   }

  30. 

  31.   @media (--lg) {

  32.     gap: var(--sp2);

  33.   }

  34. }

  35. 

  36. .teaser__image {

  37.   flex-shrink: 0;

  38.   margin: 0;

  39. 

  40.   &:empty {

  41.     display: none;

  42. 

  43.     & + .teaser__title {

  44.       flex-basis: auto;

  45.     }

  46.   }

  47. 

  48.   & a {

  49.     display: block;

  50.   }

  51. 

  52.   & img {

  53.     width: var(--sp3-5);

  54.     height: var(--sp3-5);

  55.     object-fit: cover;

  56.     border-radius: 50%;

  57. 

  58.     @media (--lg) {

  59.       width: var(--grid-col-width);

  60.       height: var(--grid-col-width);

  61.     }

  62.   }

  63. 

  64.   @media (--lg) {

  65.     position: absolute;

  66.     inset-block-start: 0;

  67.     inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));

  68.     margin: 0;

  69.   }

  70. }

  71. 

  72. .teaser__meta {

  73.   margin-block-end: var(--sp);

  74. }

  75. 

  76. .teaser__title {

  77.   margin-block: 0;

  78.   flex-basis: calc(100% - var(--sp4-5));

  79.   color: var(--color-text-neutral-loud);

  80.   font-size: 24px;

  81.   line-height: var(--line-height-base);

  82. 

  83.   @media (--lg) {

  84.     flex-basis: auto;

  85.     font-size: var(--sp2);

  86.     line-height: var(--sp3);

  87.   }

  88. }

  89. 

  90. .teaser__top {

  91.   display: flex;

  92.   flex-wrap: nowrap;

  93.   align-items: center;

  94.   margin: 0;

  95.   gap: var(--sp1);

  96.   margin-block-end: var(--sp1);

  97. 

  98.   @media (--lg) {

  99.     position: relative; /* Anchor the image */

  100.   }

  101. }