@oslokommune/punkt-css/dist/css/components/teaserlist.css

CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo

/* 
 * Header element
 */
.pkt-teaserlist {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  justify-items: center;
  position: relative;
  row-gap: 30px;
}
@media screen and (min-width: 48rem) {
  .pkt-teaserlist {
    column-gap: 30px;
    grid-template-columns: 200px auto;
    grid-template-rows: auto;
    justify-items: normal;
  }
}
@media screen and (min-width: 64rem) {
  .pkt-teaserlist {
    grid-template-columns: 300px auto;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-teaserlist.flip {
    grid-template-columns: auto 200px;
  }
}
@media screen and (min-width: 64rem) {
  .pkt-teaserlist.flip {
    grid-template-columns: auto 300px;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-teaserlist.flip > .pkt-teaserlist__img {
    grid-column: 2;
  }
}
@media screen and (min-width: 48rem) {
  .pkt-teaserlist.flip > .pkt-teaserlist__txt {
    grid-column: 1;
    grid-row: 1;
  }
}
.pkt-teaserlist__img {
  width: 150px;
}
@media screen and (min-width: 48rem) {
  .pkt-teaserlist__img {
    width: 100%;
  }
}