/*
* Color additions and overrides
* Override any color values - find them in vendor/numiko/color.scss
*/
/*
* Breakpoints 
*/
/*
* Unison: http://bjork24.github.io/Unison/
*/
@media screen and (min-width: 320px) {
  head {
    font-family: "tiny 320px";
  }
  body:after {
    content: "tiny - min-width: 320px";
  }
}
@media screen and (min-width: 480px) {
  head {
    font-family: "small 480px";
  }
  body:after {
    content: "small - min-width: 480px";
  }
}
@media screen and (min-width: 768px) {
  head {
    font-family: "medium 768px";
  }
  body:after {
    content: "medium - min-width: 768px";
  }
}
@media screen and (min-width: 1155px) {
  head {
    font-family: "large 1155px";
  }
  body:after {
    content: "large - min-width: 1155px";
  }
}
@media screen and (min-width: 1400px) {
  head {
    font-family: "huge 1400px";
  }
  body:after {
    content: "huge - min-width: 1400px";
  }
}
@media screen and (min-width: 1800px) {
  head {
    font-family: "mega 1800px";
  }
  body:after {
    content: "mega - min-width: 1800px";
  }
}
head {
  clear: both;
}

head title {
  font-family: "tiny 320px, small 480px, medium 768px, large 1155px, huge 1400px, mega 1800px";
}

body:after {
  display: none;
}

*[data-usn-if] {
  display: none;
}

/*
* Container
*/
/*
* Z-index levels
* @include z-index('alpha');
*/
/*
* Borders
*/
/*
* Transtions
*/
/*
* Borders
*/
/*
* Spacing
*/
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  *,
  *::after,
  *::before {
    -webkit-animation-duration: 0.001ms !important;
            animation-duration: 0.001ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important; /* Hat tip Nick/cssemedy (https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170) */
    -webkit-transition-duration: 0.001ms !important;
            transition-duration: 0.001ms !important;
  }
}
/*
* Accoutement Type:
* https://github.com/oddbird/accoutement-type/
*/
/*
* Typi Font Sizes
* https://www.npmjs.com/package/typi
* @include typi('h1');
*
*/
.o-editorial-hero-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "title" "meta" "standfirst" "image" "sidebar";
}

@media (min-width: 480px) {
  .o-editorial-hero-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "title title title" "meta standfirst standfirst" "image image image" "sidebar sidebar sidebar";
  }
}
@media (min-width: 768px) {
  .o-editorial-hero-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: "title title title ." "meta standfirst standfirst ." "image image image sidebar";
  }
}
.o-editorial-hero-grid__title {
  grid-area: title;
}

.o-editorial-hero-grid__meta {
  grid-area: meta;
}

.o-editorial-hero-grid__standfirst {
  grid-area: standfirst;
}

.o-editorial-hero-grid__image {
  grid-area: image;
}

.o-editorial-hero-grid__sidebar {
  grid-area: sidebar;
}

.crick-teaser-card {
  display: grid;
  grid-template-areas: "image" "content";
  grid-template-columns: 1fr;
  grid-template-rows: -webkit-min-content -webkit-min-content;
  grid-template-rows: min-content min-content;
  gap: 1rem;
}

@media (min-width: 768px) {
  .crick-teaser-card {
    padding: 0;
  }
}
.crick-teaser-card .crick-teaser-card__content {
  grid-area: content;
}

.crick-teaser-card .crick-teaser-card__teaser-image {
  grid-area: image;
}

@media (min-width: 768px) {
  .crick-teaser-card-group--items-1 .crick-teaser-card {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    grid-template-columns: 4fr 2fr;
    grid-template-areas: "content image";
    grid-template-rows: initial;
  }
  .crick-teaser-card-group--items-1 .crick-teaser-card--no-image {
    grid-template-columns: 5fr 1fr;
  }
}
@media (min-width: 1155px) {
  .crick-teaser-card-group--items-1 .crick-teaser-card {
    grid-template-columns: 7fr 5fr;
  }
  .crick-teaser-card-group--items-1 .crick-teaser-card--no-image {
    grid-template-columns: 9fr 3fr;
  }
}
.crick-teaser-card-group--items-1 .crick-teaser-card .media--type-image {
  margin-bottom: 0;
}

.crick-teaser-card-group--items-1 .crick-teaser-card__teaser-image {
  margin-bottom: 0;
}

@media (min-width: 768px) and (max-width: 1154px) {
  .crick-teaser-card-group--items-3 .crick-teaser-card {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    grid-template-columns: 4fr 2fr;
    grid-template-areas: "content image";
  }
  .crick-teaser-card-group--items-3 .crick-teaser-card--no-image {
    grid-template-columns: 5fr 1fr;
  }
  .crick-teaser-card-group--items-3 .crick-teaser-card .media--type-image {
    margin-bottom: 0;
  }
}
.crick-teaser-card a {
  text-decoration: none;
}

.crick-teaser-card:hover .crick-teaser-card__title {
  text-decoration: underline;
}

.crick-teaser-card__teaser-image {
  margin-bottom: 1rem;
  height: 15rem;
}

@media (min-width: 1155px) {
  .crick-teaser-card__teaser-image {
    height: 20rem;
  }
}
@media (min-width: 1400px) {
  .crick-teaser-card__teaser-image {
    height: 25rem;
  }
}
.crick-teaser-card__teaser-image img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
}

.crick-teaser-card__teaser-image figcaption {
  display: none;
}

.crick-teaser-card__feature {
  margin-bottom: 0.5rem;
  font-size: 0.87em;
  line-height: 1.2;
  font-weight: 500;
}

@media all and (min-width: 768px) {
  .crick-teaser-card__feature {
    font-size: 0.78em;
  }
}
@media all and (min-width: 1155px) {
  .crick-teaser-card__feature {
    font-size: 0.7em;
  }
}
@media all and (min-width: 1800px) {
  .crick-teaser-card__feature {
    font-size: 0.72em;
  }
}
.crick-teaser-card__title {
  text-decoration: none;
}

@media (min-width: 1155px) {
  .crick-teaser-card__title {
    font-size: 151%;
  }
}
.crick-teaser-card__standfirst {
  font-size: 1em;
  line-height: 1.2;
  font-weight: 400;
  line-height: 1.5;
}

@media all and (min-width: 768px) {
  .crick-teaser-card__standfirst {
    font-size: 0.89em;
  }
}
@media all and (min-width: 1155px) {
  .crick-teaser-card__standfirst {
    font-size: 0.8em;
  }
}
@media all and (min-width: 1800px) {
  .crick-teaser-card__standfirst {
    font-size: 0.81em;
  }
}