/**
 * Abbreviations:
 * - fd: From Design. (This is an exact value directly measured in the design file provided by the web designer.)
 */
/**
 * Colors
 */
/**
 * Layout
 */
/**
 * Borders and layout spacing.
 */
/**
 * Text and fixed-size perceivable elements.
 */
/**
 * Transitions.
 */
/**
 * Functions.
 */
:root {
  --gap: 16px;
}

.std-book-link {
  display: grid;
  height: 16rem;
  column-gap: var(--gap);
  grid-template-columns: 16rem 1fr;
  grid-template-rows: auto 1fr;
}
.std-book-link > .img {
  grid-row: 1/3;
}

.std-button.-withicon > .text {
  display: block;
}

.std-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.std-grid > .item {
  aspect-ratio: 1.7777777778;
}

.std-interactive.-search > .icon {
  display: block;
  height: 1em;
}

.std-mosaic-list:not(.-oneperrow, .-nottoomany) {
  column-gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-section-beginners > .std-layout > .std-layout.-links {
  background: no-repeat url("barney-transparent.svg") right/contain;
}
.site-section-beginners > .std-layout > .std-layout.-links > .item {
  width: 80%;
}

.article-mosaic {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
}
.article-mosaic > .right > .title {
  white-space: nowrap;
}

.review-mosaic > .link > .imgs > .std-badge {
  transform: translateY(calc(var(--gap) / 2)) translateX(var(--gap));
}
.review-mosaic > .link > .text > .header {
  flex-direction: row;
  align-items: start;
}
.review-mosaic > .link > .text > .header > .left {
  flex: 1 1 0;
}
.review-mosaic > .link > .text > .header > .std-rating-container {
  --font-size-primary: 2em;
  align-items: center;
  flex: 0 0 auto;
}
.review-mosaic > .link > .text > .header > .std-rating-container > .rating {
  display: flex;
}