/*  ==========================================================================
    Blog
    ========================================================================== */
/*
    Block
    ========================================================================== */
body.single-post,
body.archive.tag,
body.blog {
  padding-top: 70px;
}

@media screen and (min-width: 740px) {
  body.single-post,
  body.archive.tag,
  body.blog {
    padding-top: 100px;
  }
}

/*  ==========================================================================
    Block: Title Text
    ========================================================================== */
/*
    Block
    ========================================================================== */
.block-title-text {
  margin: 70px 0 40px;
}

@media screen and (min-width: 740px) {
  .block-title-text {
    margin: 60px 0 120px;
  }
}

/*
    Element
    ========================================================================== */
.block-title-text__title {
  margin: 0;
  font-size: 39px;
  font-weight: 600;
  line-height: calc( 42 / 39);
  letter-spacing: -0.05em;
}

@media screen and (min-width: 740px) {
  .block-title-text__title {
    font-size: 80px;
  }
}

@media screen and (min-width: 1080px) {
  .block-title-text__title {
    font-size: 115px;
    line-height: calc( 100 / 115);
    margin-top: 5px;
  }
}

@media screen and (max-width: 739px) {
  .block-title-text__title {
    margin-bottom: 15px;
  }
}

@media screen and (min-width: 740px) {
  .block-title-text__inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
  }
}

.block-title-text__text {
  color: #5E6061;
  font-weight: 400;
  font-size: 17px;
  line-height: calc( 24 / 17);
  letter-spacing: -0.02em;
}

@media screen and (min-width: 740px) {
  .block-title-text__text {
    width: calc( 100% / 20 * 8);
  }
}

/*  ==========================================================================
    Block: Title Slideshow
    ========================================================================== */
/*
    Block
    ========================================================================== */
.block-title-slideshow {
  margin: 60px 0;
}

@media screen and (min-width: 740px) {
  .block-title-slideshow {
    margin: 60px 0 80px;
  }
}

.block-title-slideshow .slideshow--items {
  margin-left: -15px;
  margin-right: -15px;
}

.block-title-slideshow .slideshow--items .slideshow__slide {
  padding: 0 15px;
}

/*
    Element
    ========================================================================== */
.block-title-slideshow__title {
  margin: 0;
  font-size: 39px;
  line-height: calc( 42 / 39);
  letter-spacing: -0.01em;
  text-transform: inherit;
}

.block-title-slideshow__top {
  margin-bottom: 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: end;
      align-items: flex-end;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

@media screen and (max-width: 739px) {
  .block-title-slideshow__arrows {
    display: none;
  }
}

.block-title-slideshow__mobile-arrows {
  margin-top: 15px;
}

@media screen and (min-width: 1080px) {
  .block-title-slideshow__mobile-arrows {
    display: none;
  }
}

.block-title-slideshow__mobile-arrows .arrows_contain {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
      justify-content: flex-start;
  gap: 25px;
  position: relative;
  left: 0;
}

.block-title-slideshow__mobile-arrows .arrows_contain .arrow {
  margin: 0;
}

/*  ==========================================================================
    Block: Feature
    ========================================================================== */
/*
    Block
    ========================================================================== */
/*
    Element
    ========================================================================== */
.block-feature__image {
  margin-bottom: 25px;
  padding-bottom: calc( 600 / 1238 * 100%);
  position: relative;
}

.block-feature__image img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.block-feature__title {
  margin: 0;
  margin-bottom: 30px;
  font-size: 39px;
  line-height: calc( 42 / 39);
  letter-spacing: -0.01em;
}

.block-feature__tags {
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin: 0;
  margin-bottom: 5px;
  padding: 0;
  gap: 10px;
}

.block-feature__tags li {
  margin: 0;
}

.block-feature__text {
  color: #5E6061;
  font-weight: 400;
  font-size: 17px;
  line-height: calc( 24 / 17);
  letter-spacing: -0.02em;
}

@media screen and (min-width: 740px) {
  .block-feature__text {
    width: calc( 100% / 20 * 12);
  }
}

/*  ==========================================================================
    Block: Grid
    ========================================================================== */
/*
    Block
    ========================================================================== */
.block-grid {
  margin-bottom: 120px;
}

/*
    Element
    ========================================================================== */
.block-grid__inner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: 60px 0;
}

@media screen and (min-width: 740px) {
  .block-grid__inner {
    gap: 60px 30px;
  }
}

@media screen and (min-width: 1080px) {
  .block-grid__inner {
    gap: 60px;
  }
}

.block-grid__item {
  width: 100%;
}

@media screen and (min-width: 740px) {
  .block-grid__item {
    width: calc( 50% - 15px);
  }
}

@media screen and (min-width: 1080px) {
  .block-grid__item {
    width: calc( 50% - 30px);
  }
}

.block-grid__title {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  padding-top: 35px;
  margin: 0;
  margin-bottom: 50px;
  font-size: 39px;
  line-height: calc( 42 / 39);
  letter-spacing: -0.01em;
  text-transform: inherit;
}

@media screen and (min-width: 740px) {
  .block-grid__title {
    padding-top: 60px;
  }
}

/*  ==========================================================================
    Block: Filter
    ========================================================================== */
/*
    Block
    ========================================================================== */
.block-filter {
  margin-bottom: 35px;
}

/*
    Element
    ========================================================================== */
.block-filter__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
}

.block-filter__tags li {
  margin: 0;
}

/*  ==========================================================================
    Block: Post Header
    ========================================================================== */
/*
    Block
    ========================================================================== */
.block-post-header {
  margin: 60px 0 0;
}

/*
    Element
    ========================================================================== */
.block-post-header__title {
  margin: 0;
  margin-bottom: 25px;
  font-size: 39px;
  line-height: calc( 42 / 39);
  font-weight: 600;
  letter-spacing: -0.05em;
  color: #191C1D;
}

@media screen and (min-width: 740px) {
  .block-post-header__title {
    margin-bottom: 10px;
    font-size: 52px;
    line-height: calc( 63 / 52);
  }
}

.block-post-header__meta {
  list-style: none;
  margin: 0;
  margin-bottom: 15px;
  padding: 0;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
  color: #4C8274;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 500;
}

.block-post-header__meta li + li {
  position: relative;
}

.block-post-header__meta li + li:before {
  content: '';
  width: 4px;
  height: 4px;
  background-color: #4C8274;
  border-radius: 100%;
  display: block;
  position: absolute;
  left: -10px;
  top: 50%;
  -ms-transform: translateY(-50%);
      transform: translateY(-50%);
}

.block-post-header__image {
  position: relative;
  padding-bottom: calc( 600 / 1238 * 100%);
}

@media screen and (max-width: 739px) {
  .block-post-header__image {
    display: none;
  }
}

.block-post-header__image img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*  ==========================================================================
    Block: Post Content
    ========================================================================== */
/*
    Block
    ========================================================================== */
.block-post-content {
  margin: 15px 0 80px;
}

@media screen and (min-width: 740px) {
  .block-post-content {
    margin: 15px 0 160px;
  }
}

@media screen and (min-width: 740px) {
  .block-post-content .container {
    width: 70%;
  }
}

@media screen and (min-width: 1080px) {
  .block-post-content .container {
    width: 52%;
  }
}

/*
    Element
    ========================================================================== */
.block-post-content__tags {
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin: 0;
  margin-bottom: 5px;
  padding: 0;
  gap: 10px;
}

.block-post-content__tags li {
  margin: 0;
}

.block-post-content__heading {
  margin: 0;
  margin-top: -5px;
  margin-bottom: 20px;
  font-size: 24px;
  line-height: calc( 34 / 24);
  letter-spacing: -0.01em;
  color: #191C1D;
  text-transform: initial;
}

.block-post-content__text {
  margin-bottom: 20px;
}

.block-post-content__text p {
  color: #191C1D;
  font-weight: 400;
  font-size: 17px;
  line-height: calc( 24 / 17);
  letter-spacing: -0.01em;
}

.block-post-content__text p:not(:last-child) {
  margin-bottom: 25px;
}

.block-post-content__image {
  margin-bottom: 10px;
}

.block-post-content__image img {
  height: auto;
}

.block-post-content__video {
  padding-bottom: calc( 9 / 16 * 100%);
  position: relative;
  margin-bottom: 10px;
}

.block-post-content__video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block-post-content__slideshow {
  margin-top: 20px;
  margin-bottom: 20px;
}

@media screen and (min-width: 740px) {
  .block-post-content__slideshow {
    margin-left: calc( -13% - 10px);
    margin-right: calc( -13% - 10px);
  }
}

@media screen and (min-width: 1080px) {
  .block-post-content__slideshow {
    margin-left: calc( -36% - 10px);
    margin-right: calc( -36% - 10px);
  }
}

/*  ==========================================================================
    Block: Button Pill
    ========================================================================== */
/*
    Block
    ========================================================================== */
.btn-pill {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  text-transform: capitalize;
  height: 20px;
  border-radius: 13px;
  padding: 0 10px;
  background-color: #EEF3F2;
  color: #4C8274;
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.btn-pill {
  height: 40px;
  padding: 0 15px;
  font-size: 15px;
  border-radius: 40px;
}

/*  ==========================================================================
    Block: Button Square
    ========================================================================== */
/*
    Block
    ========================================================================== */
.btn-square {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  height: 64px;
  border-radius: 6px;
  padding: 0 30px;
  background-color: #F6F6F6;
  color: #9D9FA0;
  font-size: 14px;
  line-height: calc( 30 / 14);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: capitalize;
  border: 2px solid transparent;
  transition: ease all 300ms;
}

@media screen and (min-width: 740px) {
  .btn-square {
    font-size: 17px;
    line-height: calc( 30 / 17);
  }
}

.btn-square:hover {
  color: #4C8274;
}

.btn-square.is-active {
  border: 2px solid #4C8274;
  color: #4C8274;
}

/*  ==========================================================================
    Component: Tile
    ========================================================================== */
/*
    Block
    ========================================================================== */
.c-tile {
  position: relative;
}

/*
    Element
    ========================================================================== */
.c-tile__image {
  padding-bottom: calc( 332 / 397 * 100%);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.c-tile__image:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, black 100%);
  opacity: .5;
}

.c-tile__image img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-tile__title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 25px 20px;
  margin: 0;
  text-transform: inherit;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: calc( 28 / 24);
  letter-spacing: -0.01em;
}

.c-tile__title a {
  color: #fff;
}

/*  ==========================================================================
    Component: Item
    ========================================================================== */
/*
    Block
    ========================================================================== */
/*
    Element
    ========================================================================== */
.c-item__image {
  position: relative;
  padding-bottom: calc( 350 / 591 * 100%);
  margin-bottom: 20px;
}

@media screen and (max-width: 739px) {
  .c-item__image {
    padding-bottom: calc( 1 / 1 * 100%);
  }
}

.c-item__image img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

.c-item__tags {
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  margin: 0;
  margin-bottom: 15px;
  padding: 0;
  gap: 10px;
}

.c-item__tags li {
  margin: 0;
}

.c-item__title {
  margin: 0;
  margin-bottom: 15px;
  text-transform: inherit;
  font-size: 28px;
  font-weight: 600;
  line-height: calc( 34 / 28);
  letter-spacing: -0.01em;
}

.c-item__title a {
  color: #000;
  transition: ease color 300ms;
}

.c-item__title a:hover {
  color: #4C8274;
}

.c-item__link {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  line-height: calc( 18 / 16);
  letter-spacing: 0.05em;
}

.c-item__link a {
  color: #4C8274;
  transition: ease color 300ms;
}

.c-item__link a:hover {
  color: #000;
}
