:root {
  font-size: 20px;
  --font-up-15: 6rem;
  --font-up-13: 4.624rem;
  --font-up-11: 3.653rem;
  --font-up-9: 2.887rem;
  --font-up-7: 2.281rem;
  --font-up-6: 2.027rem;
  --font-up-5: 1.802rem;
  --font-up-4: 1.602rem;
  --font-up-2: 1.266rem;
  --font-up-1: 1.125rem;
  --font-root: 1rem;
  --font-down-1: 0.889rem;
  --font-down-2: 0.79rem;
  --font-down-3: 0.702rem;
  --font-down-4: 0.624rem;
}

@media (max-width: 1700px) {
  :root {
    font-size: 17.5px;
  }
}
@media (max-width: 1200px) {
  :root {
    font-size: 16px;
  }
}
@media (max-width: 600px) {
  :root {
    --font-up-15: 4rem;
    --font-up-13: 3rem;
    --font-up-11: 2.887rem;
    --font-up-9: 2.027rem;
    --font-up-7: 1.802rem;
    --font-up-6: 1.602rem;
    --font-up-5: 1.502rem;
    --font-up-4: 1.466rem;
    --font-up-2: 1.4rem;
    --font-up-1: 1.2rem;
    --font-root: 1.1rem;
    --font-down-1: 1rem;
    --font-down-2: 0.95rem;
  }
}
:root {
  --wp--preset--color--v-8-black:#0D1421;
  --wp--preset--color--v-8-gray:#677278;
  --wp--preset--color--v-8-green:#00A569;
  --wp--preset--color--v-8-blue:#538BFA;
  --wp--preset--color--light-gray: #D2D4D6;
  --wp--preset--color--rich-black: #0A1120;
  --wp--preset--color--lime-green:#00CC33;
  --wp--preset--color--cerulean-blue: #1650CC;
  --wp--preset--color--cerulean-blue-bright: #2160E8;
  --wp--preset--color--orange-crayola: #F87433;
  --wp--preset--color--purple: #A74DC3;
  --wp--preset--color--yellow: #FFD517 ;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--gray-blur:#161D2B;
  --wp--preset--color--dark-blue:#131D33;
  --wp--preset--color--soft-gray:#F4F4F5;
  --wp--preset--color--mid-gray:#BCBEC2;
  --wp--preset--color--light-yellow:#F7F3EC;
}

#resource-filters label {
  width: 100%;
  display: block;
}
#resource-filters label input {
  margin-right: 0.25rem;
}

.resources-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
}
.resources-wrap .resources-filters {
  width: 25%;
}
.resources-wrap .resources-filters #topic-filters h4, .resources-wrap .resources-filters #type-filters h4 {
  font-size: var(--font-root);
  margin-top: 0;
  margin-bottom: 1rem;
}
.resources-wrap .resources-filters #topic-filters label, .resources-wrap .resources-filters #type-filters label {
  font-size: var(--font-down-1);
  margin: 0.5rem 0;
  font-weight: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.resources-wrap .resources-filters #topic-filters input, .resources-wrap .resources-filters #type-filters input {
  margin-right: 0.5rem;
  border-color: #676D78;
  width: 1rem;
  height: 1rem;
  border: 1px solid #676D78;
  border-radius: 0;
}
.resources-wrap .resources-filters #type-filters {
  margin-top: 2rem;
}
.resources-wrap .resources-grid {
  width: 75%;
}
.resources-wrap .resources-grid ul.resources-list {
  width: 100%;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 2%;
  list-style: none;
}
.resources-wrap .resources-grid ul.resources-list li {
  margin: 1% 0;
  padding: 3%;
  width: 32%;
  border-radius: 0.8rem;
  border: 1px solid #CCC;
  background: #F7F3EC;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  aspect-ratio: 329/400;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: bottom center;
}
.resources-wrap .resources-grid ul.resources-list li .rw {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.resources-wrap .resources-grid ul.resources-list li .resource-type {
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  display: inline-block;
  font-size: var(--font-down-3);
  border-radius: 0.2rem;
  border: 1px solid #B0A188;
  background: #EFE7D9;
  color: #635A4B;
  padding: 0.15rem 0.25rem;
  line-height: normal;
}
.resources-wrap .resources-grid ul.resources-list li .resource-title {
  font-size: var(--font-up-1);
  line-height: calc(var(--font-up-1) * 1.2);
  font-weight: 700;
  color: #202B30;
  text-decoration: none;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.resources-wrap .resources-grid ul.resources-list li .resource-title:hover {
  text-decoration: underline;
}
.resources-wrap .resources-grid ul.resources-list li a.learn-more {
  border-radius: 8px;
  border: 1px solid #CCC;
  background: #FFF;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0.25rem 0.75rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: #202B30;
  text-decoration: none;
  font-size: var(--font-down-2);
}
.resources-wrap .resources-grid ul.resources-list li a.learn-more:hover {
  border: 1px solid #202B30;
}
.resources-wrap .resources-grid ul.resources-list li.type-ebook {
  background-color: #D7E3FC;
  background-image: url("../img/ebook.svg");
}
.resources-wrap .resources-grid ul.resources-list li.type-ebook .resource-type {
  border: 1px solid #6998F5;
  background: #BAD1FE;
  color: #19459C;
}
.resources-wrap .resources-grid ul.resources-list li.type-whitepaper {
  background-color: #FFECC9;
  background-image: url("../img/whitepaper.svg");
}
.resources-wrap .resources-grid ul.resources-list li.type-whitepaper .resource-type {
  border: 1px solid #F2C060;
  background: #FFE1A9;
  color: #6F4900;
}
.resources-wrap .resources-grid ul.resources-list li.type-article {
  background-color: #F3E2F8;
  background-image: url("../img/article.svg");
}
.resources-wrap .resources-grid ul.resources-list li.type-article .resource-type {
  border: 1px solid #C87DDF;
  background: #F1D5F9;
  color: #77358B;
}
@media screen and (max-width: 1000px) {
  .resources-wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2rem;
  }
  .resources-wrap .resources-grid {
    width: 100%;
  }
  .resources-wrap .resources-filters {
    width: 100%;
    float: left;
  }
  .resources-wrap .resources-filters #topic-filters, .resources-wrap .resources-filters #type-filters {
    float: left;
    width: 100%;
  }
  .resources-wrap .resources-filters #topic-filters h4, .resources-wrap .resources-filters #type-filters h4 {
    width: 100%;
    margin-bottom: 0.25rem;
  }
  .resources-wrap .resources-filters #topic-filters label, .resources-wrap .resources-filters #type-filters label {
    float: left;
    width: auto;
    display: block;
    margin-right: 2rem;
  }
  .resources-wrap .resources-filters #type-filters {
    margin-top: 1rem;
  }
}
@media screen and (max-width: 600px) {
  .resources-wrap .resources-grid ul.resources-list {
    gap: 2%;
  }
  .resources-wrap .resources-grid ul.resources-list li {
    margin: 1% 0;
    width: 49%;
  }
}
@media screen and (max-width: 400px) {
  .resources-wrap .resources-grid ul.resources-list {
    gap: 4%;
  }
  .resources-wrap .resources-grid ul.resources-list li {
    padding: 8%;
    margin: 4% 0;
    width: 100%;
    aspect-ratio: 1/1;
  }
}