.article {



  --article-container: 1094px;



  margin-top: var(--tb-val-m);



  margin-inline: auto;



  max-width: calc(var(--article-container) + var(--p-inline) * 2);



}







.article-hero-container {



  padding: var(--tb-val-m);



  text-align: center;



  background-color: var(--bg-l-green);



  border-radius: 20px;



}







.article-hero-info {



  display: flex;



  margin-bottom: 20px;



  justify-content: center;



  align-items: center;



  gap: 20px;



}







.article-hero-date {



  display: block;



  padding-right: 20px;



  color: var(--clr-d-gray);



  border-right: 1px solid var(--acc-line-green);



}







.article-hero-tag {



  font-weight: 700;



}







.article-hero-tag.blue {



  color: var(--label-blue);



}







.article-hero-tag.green {



  color: var(--label-green);



}







.article-hero-tag.purple {



  color: var(--label-purple);



}







.article-hero-img {



  margin-top: var(--tb-val-xs);



}







.article img {



  width: 100%;



  border-radius: 20px;



}







.article-content {



  margin-top: var(--tb-val-m);



  padding: var(--tb-val-m);



  background-color: var(--clr-white);



  border-radius: 20px;



}







.article-content > * + h3,



.article-content > * + figure,



.article-content > * + .article-img-wrap {



  margin-top: var(--tb-val-m);



}







.article-content > * + * {



  margin-top: 25px;



}







.article-content h3 {



  font-size: 35px;



  font-weight: 700;



  line-height: 1.3em;



  color: var(--clr-black);



  /* text-align: center; */



}







.article-content h3 + p {



  margin-top: var(--tb-val-s);



}







.article-content p,



.article-content ul,



.article-content ol {



  font-size: 20px;



  font-weight: 400;



  line-height: 1.5em;



  color: var(--clr-d-gray);



}







.article-content p + p {



  margin-top: 25px;



}







.article-content ul,



.article-content ol {



  margin-left: 30px;



  list-style: none;



}







/* .article-content ul li, */



/* .article-content ol li {



  display: flex;



  align-items: flex-start;



  gap: 25px;



} */


.article-content ul li{
  position: relative;
}

.article-content ol{
  list-style: decimal;
  padding-left: 20px;
}
.article-content ol li{
  display: list-item;
}

.article-content ol li::marker{
  font-weight: 700;
  color: var(--acc-green);

}

.article-content ul li + li,



.article-content ol li + li {



  margin-top: 25px;



}







.article-content ul li:before {

  top: -3px;
  position: absolute;
  left: -15px;

  content: "";



  display: block;



  margin-top: 11px;



  width: 8px;



  height: 8px;



  background-color: var(--acc-green);



  border-radius: 2px;



  flex-shrink: 0;



}







.article-content ol {



  counter-reset: listEl;



}







.article-content ol li:before {



  /* counter-increment: listEl;



  content: counter(listEl) ". "; */



  font-weight: 700;



  color: var(--acc-green);



}







.article-content strong p {



  font-weight: 700;



}







.article-content figure figcaption {



  margin-top: 15px;



  font-size: 16px;



  font-weight: 400;



  line-height: 1.5em;



  color: var(--clr-l-gray);



}







.article-img-wrap {



  display: grid;



  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));



  gap: 20px;



}







@media screen and (max-width: 1600px) {



  .article-content h3 {



    font-size: 31px;



  }



}







@media screen and (max-width: 1440px) {



  .article {



    --article-container: 826px;



  }







  .article-content h3 {



    font-size: 27px;



  }







  .article-content p,



  .article-content ul,



  .article-content ol {



    font-size: 18px;



  }







  .article-content figure figcaption {



    font-size: 14px;



  }



}







@media screen and (max-width: 1280px) {



  .article-content h3 {



    font-size: 23px;



  }



}







@media screen and (max-width: 1024px) {



  .article-hero-info {



    margin-bottom: 16px;



  }







  .article-content > * + * {



    margin-top: 16px;



  }







  .article-content h3 {



    font-size: 21px;



  }







  .article-content p,



  .article-content ul,



  .article-content ol {



    font-size: 16px;



  }







  .article-content p + p {



    margin-top: 16px;



  }







  .article-content ul,



  .article-content ol {



    margin-left: 16px;



  }







  .article-content ul li,



  .article-content ol li {



    gap: 12px;



  }







  .article-content ul li + li,



  .article-content ol li + li {



    margin-top: 16px;



  }







  .article-content ul li:before {



    width: 6px;



    height: 6px;



  }







  .article-content figure figcaption {



    margin-top: 8px;



    font-size: 12px;



  }







  .article-img-wrap {



    gap: 16px;



  }



}



.wp-block-gallery{

  display: flex;

}



@media screen and (max-width: 552px) {



  .article-hero-info {



    gap: 16px;



  }





  .wp-block-gallery{

    flex-direction: column;

    gap: 20px;

  }





  .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image){



    width: 100%;



  }



  .article-hero-date {



    padding-right: 16px;



  }







  .article-content {



    margin-inline: calc(var(--p-inline) * -1);



    padding-inline: var(--p-inline);



  }







  .article-content h3 {



    font-size: 19px;



  }







  .article-content p,



  .article-content ul,



  .article-content ol {



    font-size: 14px;



  }



}

/*.article-content a{
  transition: all 0.5s ease;
  color: #0DAC8F;
  position: relative;
}

.article-content a::after{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: auto;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #0DAC8F;
  transition: all 0.5s ease;
  transform-origin: right;
}

.article-content a:hover{
  color: #0DAC8F;
  transition: all 0.5s ease;
}

.article-content a:hover::after{
  width: 0;
  left: auto;
  right: 0;
}*/

.article-content a {
  /* you can change these variables to control the border */
  --border-color: #0DAC8F;
  --border-width: 1px;
  --bottom-distance: 0px; /* you can increase this */

  color: #0DAC8F;
  display: inline; /* should be 'inline' for multiple line animation */
  background-image: linear-gradient(var(--border-color), var(--border-color));
  background-repeat: no-repeat;
  transition: background-size 0.5s;

}

.article-content a {
  background-position: 100% calc(100% - var(--bottom-distance));
  background-size: 100% var(--border-width);
}

.article-content a:hover {
  background-size: 0% var(--border-width);
}