/*
Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.
@access private
@param {Number} $value - Pixel value to convert.
@param {Number} $base [null] - Base for pixel conversion.
@returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.
*/
/*
Removes the unit (e.g. px, em, rem) from a value, returning the number only.
@param {Number} $num - Number to strip unit from.
@returns {Number} The same number, sans unit.
*/
/*
Converts one or more pixel values into matching rem values.
@param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.
@param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base.
@returns {List} A list of converted values.
*/
/**
 * Contrast
 */
/**
*	Basic link hover function
*/
/*
* Fluid Type function
*/
/*
* Breakpoint Handler
* @usage: respond-to('tablet_small') { ... } to target 'tablet_small' and aboe
*/
/*
* Grid Layout
*/
/*
* Responsive Type mixins
*/
/*
* Helpers
*/
.resources {
  position: relative;
  z-index: 1;
}
@media (min-width: 1023px) {
  .resources__container {
    display: grid;
    grid-template-columns: calc(100% - 418px) 350px;
    -webkit-column-gap: 68px;
       -moz-column-gap: 68px;
            column-gap: 68px;
  }
}
.resources__article {
  margin-bottom: 24px;
}
.resources__article:hover picture {
  -webkit-transform: scale(1.15);
          transform: scale(1.15);
}
.resources__article:hover h4 > a,
.resources__article:hover .h5 > a {
  color: var(--magenta);
}
.resources__article__thumbnail {
  border-radius: 8px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  margin-bottom: 16px;
  display: block;
}
@media (min-width: 769px) {
  .resources__article__thumbnail {
    margin-bottom: 32px;
  }
}
.resources__article__thumbnail picture {
  display: block;
  background-color: var(--light-grey);
  height: 0;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.resources__article__thumbnail picture > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.resources__article__thumbnail picture {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  padding-bottom: 50%;
}
.resources__article__meta {
  font-size: 12px;
}
@media only screen and (min-width: 320px) {
  .resources__article__meta {
    font-size: calc(12px + 2 * (100vw - 320px) / (1720 - 320));
  }
}
@media only screen and (min-width: 1720px) {
  .resources__article__meta {
    font-size: 14px;
  }
}
.resources__article__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: 500;
}
.resources__article h4 {
  font-size: 18px;
}
@media only screen and (min-width: 320px) {
  .resources__article h4 {
    font-size: calc(18px + 14 * (100vw - 320px) / (1720 - 320));
  }
}
@media only screen and (min-width: 1720px) {
  .resources__article h4 {
    font-size: 32px;
  }
}
.resources__article h4 {
  line-height: 1.25;
  font-weight: 600;
  margin-bottom: 24px;
}
.resources__article .h5 {
  font-size: 16px;
}
@media only screen and (min-width: 320px) {
  .resources__article .h5 {
    font-size: calc(16px + 4 * (100vw - 320px) / (1720 - 320));
  }
}
@media only screen and (min-width: 1720px) {
  .resources__article .h5 {
    font-size: 20px;
  }
}
.resources__article .h5 {
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 16px;
}
.resources__article a {
  color: var(--black);
}
.resources__article .inline-tags {
  margin-bottom: 16px;
}
.resources__article .avatar {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
  background-color: var(--mid-grey);
  margin-right: 16px;
}
.resources__article .author {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 24px;
}
.resources__article .author > a {
  border-bottom: 1px solid var(--black);
}
.resources__article--featured {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--white);
}
@media (min-width: 1023px) {
  .resources__article--featured {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
}
.resources__article--featured picture {
  border-radius: 16px;
  padding-bottom: 50%;
}
.resources--dark-bg {
  background-color: var(--black);
  color: var(--white);
  padding: 100px 0;
}
.resources--dark-bg .resources__article:not(.resources__article--featured):not(:last-of-type) {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--white);
}
.resources--dark-bg .resources__article a {
  color: var(--white);
}
.resources--dark-bg .resources__article .author > a {
  border-bottom: 1px solid var(--white);
}
.resources__bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
  overflow: hidden;
}
.resources__bg-image:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  content: "";
  z-index: 1;
  background: linear-gradient(45deg, #181422 20%, rgba(24, 20, 34, 0) 90%);
  content: "";
}
.resources__bg-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.5;
}

.block-resources {
  position: relative;
}
.block-resources__content-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.5rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
/*# sourceMappingURL=block-resources.css.map */