@layer base {
  :root {
    --color-blue-500: 12, 27, 54;
    --color-blue-400: 22, 34, 54;
    --color-blue-350: 34, 44, 53;
    --color-blue-300: 48, 59, 79;
    --color-blue-250: 53, 64, 83;
    --color-blue-200: 85, 116, 151;
    --color-blue-100: 118, 140, 168;
    --color-blue-50: 246, 247, 247;
    --color-navy-blue-250: 60, 73, 94;
    --color-gray-800: 31, 41, 55;
    --color-gray-500: 107, 114, 128;
    --color-gray-400: 156, 163, 175;
    --color-gray-300: 209, 213, 219;
    --color-gray-200: 223, 223, 223;
    --color-gray-150: 240, 240, 240;
    --color-gray-100: 248, 243, 233;
    --color-gray-50: 253, 250, 247;
    --color-white: 255, 255, 255;
    --color-white-200: 252, 249, 244;
    --color-green-600: 156, 179, 59;
    --color-green-500: 187, 211, 0;
    --color-red-100: 254, 240, 240;
    --color-pie-chart-1: var(--color-green-500);
    --color-pie-chart-2: var(--color-green-600);
    --color-pie-chart-3: 53, 109, 93;
    --color-pie-chart-4: 138, 189, 243;
    --color-pie-chart-5: 186, 146, 159;
    --color-pie-chart-6: 196, 184, 186;
    --color-pie-chart-7: 238, 225, 200;
    --color-pie-chart-8: 231, 231, 231;
    --color-pie-chart-9: 12, 28, 55;
    --color-pie-chart-10: var(--color-blue-350);
  }
}
/*
 Tiempos Fine and Inter now imported via sppagebuilder font book
*/
.percent-sign {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
}

.listing {
  -moz-column-gap: 40px;
       column-gap: 40px;
}
.listing * {
  font-family: "Inter", sans-serif;
  font-weight: 400;
}
.listing.listing-has-image {
  display: grid;
  grid-template-areas: "featured article0" "featured article1" "article2 article3";
}
.listing.listing-has-image .item.featured {
  padding: 0px;
  max-height: 2040px;
}
.listing.listing-has-image .item.featured #featured-image {
  flex-basis: 52%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 400px;
}
.listing.listing-has-image .item.featured .tag-section {
  padding: 40px 40px 0px;
  margin-bottom: 20px;
  height: 70px;
}
.listing.listing-has-image .item.featured h3 {
  padding: 0px 40px;
}
.listing.listing-has-image .item.featured .item-description {
  padding: 0px 40px;
}
.listing.listing-has-image .item.featured .multiline-ellipsis {
  line-clamp: 4;
  -webkit-line-clamp: 4;
}
.listing.listing-has-image .item.featured .date-header {
  margin-top: auto;
  padding: 20px 40px 40px;
}
.listing.listing-no-image {
  display: grid;
  grid-template-areas: "featured article0" "article1 article2" "article3 article4";
}
.listing .item {
  margin-bottom: 40px;
  position: relative;
  padding: 40px;
  border-color: transparent;
  border-width: 1px;
  border-style: groove;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  background-color: rgb(var(--color-white));
  min-height: 500px;
  max-height: 1000px;
  overflow: hidden;
}
.listing .item.featured {
  grid-area: featured;
}
.listing .item.nonFeatured0 {
  grid-area: article0;
}
.listing .item.nonFeatured1 {
  grid-area: article1;
}
.listing .item.nonFeatured2 {
  grid-area: article2;
}
.listing .item.nonFeatured3 {
  grid-area: article3;
}
.listing .item.nonFeatured4 {
  grid-area: article4;
}
.listing .item .date-header {
  position: relative;
  width: 100%;
  margin-top: auto;
  padding-top: 20px;
}
.listing .item .date-header span {
  font-size: 14px;
  padding-right: 10px;
  font-weight: medium;
  text-transform: uppercase;
}
.listing .item h3 {
  font-size: 36px;
  font-weight: normal;
  font-family: "Tiempos Fine", serif;
  color: rgb(var(--color-blue-500));
  margin-bottom: 20px;
  line-height: 120%;
}
.listing .item .item-description {
  overflow-y: hidden;
  text-overflow: ellipsis;
  font-size: 21px;
  margin: 0px;
}
.listing .item .multiline-ellipsis {
  display: -webkit-box;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  -webkit-hyphens: none;
          hyphens: none;
  overflow: hidden;
}
.listing .item .tag-section {
  color: rgb(var(--color-blue-500));
  overflow-wrap: break-word;
  margin-bottom: 20px;
  display: flex;
  height: 30px;
}
.listing .item .date-section {
  color: rgb(var(--color-blue-500));
  margin-bottom: 10px;
  padding-top: 20px;
}
@media (max-width: 1400px) {
  .listing.listing-has-image .item.featured #featured-image {
    flex-basis: 54.5%;
  }
}
@media (max-width: 1200px) {
  .listing.listing-has-image .item.featured #featured-image {
    flex-basis: 57%;
  }
}
@media (max-width: 990px) {
  .listing {
    flex-direction: column;
    width: 100%;
  }
  .listing.listing-has-image {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .listing.listing-has-image .item.featured #featured-image {
    flex-basis: 100%;
    min-height: 300px;
  }
  .listing.listing-has-image .item.featured .tag-section {
    padding: 20px 20px 0px;
    align-items: center;
    height: 30px;
  }
  .listing.listing-has-image .item.featured h3 {
    padding: 0px 20px;
  }
  .listing.listing-has-image .item.featured .item-description {
    padding: 0px 20px 20px;
  }
  .listing.listing-has-image .item.featured .multiline-ellipsis {
    line-clamp: 6;
    -webkit-line-clamp: 6;
  }
  .listing.listing-has-image .item.featured .date-header {
    margin-top: 0;
    padding: 20px 20px 0px;
  }
  .listing.listing-no-image {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .listing.listing-no-image .item {
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
  }
  .listing .item {
    width: 100%;
    min-height: 0;
    margin-bottom: 10px;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 20px;
  }
  .listing .item h3 {
    font-size: 14px;
    order: 3;
    margin-bottom: 5px;
  }
  .listing .item .item-description {
    font-size: 12px;
    order: 4;
    overflow: hidden;
    margin: 0px;
  }
  .listing .item .date-header {
    order: 1;
    width: 50%;
    margin-bottom: 20px;
    margin-top: 0px;
    padding-top: 0px;
  }
  .listing .item .date-header span {
    font-size: 12px;
  }
  .listing .item .tag-section {
    order: 2;
    width: 50%;
    margin-bottom: 20px;
    padding: 0px;
    justify-content: flex-end;
    align-items: center;
  }
}