/*----------------------------------------------*\
    BLOCK - Content Listing
	=======================

	@package theorder

\*----------------------------------------------*/
/*----------------------------------------------*\
    COMPONENTS
	==========

	@package theorder

\*----------------------------------------------*/
/*
 *
 * / Variables
------------------------------------------------*/
/* Breakpoints */
/* Responsive type multipliers */
/* Type sizes (Minor third) */
/* Max-widths */
/* is used for calculation for extend width. Each side is extended by x ems */
.content-listing {
  margin-bottom: var(--size-700);
  line-height: 1.5;
  color: var(--color-text);
  border-top: 1px solid var(--color-section-lines);
  overflow: hidden;
  /* related to borer of last child item */
  /* Specific Layouts */
  /* Load More */
  /* Prev/Next */ }
  .content-listing:first-child {
    border-top: 0; }
  .content-listing__wrapper {
    display: grid; }
    @media screen and (min-width: 36rem) {
      .content-listing__wrapper {
        width: calc(100% + 2px);
        /* compensate for doubling borders */
        margin-left: -1px; } }
  .content-listing__item {
    border-bottom: 1px solid var(--color-section-lines);
    border-top: 0; }
  .content-listing__link {
    display: block;
    text-decoration: none;
    padding: var(--size-500); }
    .content-listing__link:hover, .content-listing__link:focus {
      background-color: var(--color-content-listing-hover); }
    .content-listing__item--show-large .content-listing__link {
      max-width: var(--max-width-wide);
      margin-left: auto;
      margin-right: auto;
      width: 100%; }
  .content-listing__poster-image {
    width: 100%;
    padding-bottom: 75%;
    /* aspect-ratio: 4/3 */
    position: relative; }
    .content-listing__item--video .content-listing__poster-image {
      padding-bottom: 56.25%;
      /* aspect-ratio: 16/9 */ }
    .content-listing__item--show-large .content-listing__poster-image {
      padding-bottom: 56.25%;
      /* aspect-ratio: 16/9 */ }
    .content-listing__poster-image img {
      position: absolute;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover; }
  .content-listing__title {
    font-size: var(--size-300);
    line-height: 1.3;
    padding-top: var(--size-100); }
    .content-listing__item--show-large .content-listing__title {
      font-size: var(--size-500); }
  .content-listing__date {
    font-size: var(--size-300);
    font-family: var(--font-sans);
    padding-top: var(--size-100); }
    .content-listing__item--show-large .content-listing__date {
      font-size: var(--size-400); }
  .content-listing--grid .content-listing__wrapper {
    grid-template-columns: 1fr 1fr; }
    @media screen and (min-width: 36rem) {
      .content-listing--grid .content-listing__wrapper {
        grid-template-columns: 1fr 1fr 1fr; } }
    @media screen and (min-width: 48rem) {
      .content-listing--grid .content-listing__wrapper {
        grid-template-columns: 1fr 1fr 1fr 1fr; } }
  .content-listing--grid .content-listing__item {
    display: grid; }
    @media screen and (min-width: 36rem) {
      .content-listing--grid .content-listing__item {
        border-left: 1px solid var(--color-section-lines); }
        .content-listing--grid .content-listing__item:last-child {
          /* compensate for missing border of last element if it's not all the way to the right */
          position: relative; }
          .content-listing--grid .content-listing__item:last-child:after {
            position: absolute;
            content: '';
            top: 0;
            bottom: -1px;
            right: -1px;
            border-right: 1px solid var(--color-section-lines); } }
    .content-listing--grid .content-listing__item--show-large {
      grid-column: 1/3; }
      @media screen and (min-width: 36rem) {
        .content-listing--grid .content-listing__item--show-large {
          grid-column: 1/4; } }
      @media screen and (min-width: 48rem) {
        .content-listing--grid .content-listing__item--show-large {
          grid-column: 1/5; } }
  .content-listing--grid .content-listing__link {
    padding: var(--size-500) var(--size-100) var(--size-900); }
    @media screen and (min-width: 27rem) {
      .content-listing--grid .content-listing__link {
        padding: var(--size-500) var(--size-500) var(--size-900); } }
  .content-listing--list .content-listing__wrapper {
    grid-template-columns: 1fr; }
  @media screen and (min-width: 36rem) {
    .content-listing--list .content-listing__item {
      border-left: 1px solid var(--color-section-lines);
      border-right: 1px solid var(--color-section-lines); } }
  .content-listing--list .content-listing__link {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--size-500);
    -ms-flex-align: center;
        align-items: center; }
  .content-listing--list .content-listing__title {
    font-size: var(--size-400);
    padding-top: 0; }
  .content-listing__load-more {
    padding: 0 var(--size-400);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    margin-top: var(--size-500);
    margin-bottom: var(--size-700); }
    .content-listing__load-more button {
      font-family: var(--font-serif);
      color: var(--color-button-text-primary);
      background-color: var(--color-button-primary);
      border: 1px solid var(--color-button-border-primary);
      display: block;
      padding: var(--size-300);
      text-decoration: none;
      min-width: 10em;
      font-size: var(--size-300);
      text-align: center; }
      .content-listing__load-more button:hover {
        background-color: var(--color-button-hover-primary); }
      .content-listing__load-more button:focus {
        outline: none; }
  .content-listing__pagination {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-line-pack: justify;
        align-content: space-between; }
    .content-listing__pagination button {
      width: 100%;
      font-family: var(--font-sans);
      font-size: var(--size-300);
      text-transform: uppercase;
      color: var(--color-secondary);
      padding: var(--size-600); }
      .content-listing__pagination button:hover {
        background-color: var(--color-content-listing-hover); }
    .content-listing__pagination--previous {
      border-right: 1px solid var(--color-section-lines); }
      .content-listing__pagination--previous svg {
        display: inline-block;
        vertical-align: middle;
        margin-right: var(--size-100); }
    .content-listing__pagination--next svg {
      display: inline-block;
      vertical-align: middle;
      margin-left: var(--size-100); }
  .content-listing--hide-borders {
    border: 0 !important; }
    .content-listing--hide-borders .content-listing__item {
      border: 0 !important; }
      .content-listing--hide-borders .content-listing__item:after {
        border: 0 !important; }