.page_item__frame {
  margin-bottom: em(50px);
  width: 100%;
  display: block;
}

.page_item {
  border: em(2px) solid $light_gray;
  display: block;
  text-decoration: none;
  padding-left: 50%;
  position: relative;
  background: $white;
  transition: border-color 0.2s ease-in-out;
  &:hover {
    border-color: $green;
  }
  @media screen and (max-width: $large_breakpoint) {
    padding: 0;
  }
}

.page_item__image {
  width: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  background: $light_gray;
  @media screen and (max-width: $large_breakpoint) {
    width: 100%;
    height: em(220px);
    position: relative;
  }
}

.page_item__image__title {
  width: 100%;
  padding: 0 em(50px);
  color: darken($light_gray, 5);
  font-weight: 800;
  text-align: center;
  font-size: em(50px);
  text-transform: uppercase;
  line-height: 1.3;
  word-break: break-word;
  hyphens: auto;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  .subpage & {
    font-size: em(30px);
  }
}

.page_item__image__main {
  background-size: cover;
  background-position: center;
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  bottom: -10%;
  & + .page_item__image__title {
    display: none;
  }
}

.page_item__content {
  width: 100%;
  padding: em(35px);
  p {
    line-height: 1.4;
    color: $dark_gray;
    margin-bottom: em(30px);
    .highlighted {
      font-weight: bold;
    }
  }
  .subpage & {
    h3 {
      font-size: em(24px);
    }
  }
}

.page_item__button {
  text-align: right;
}

.page_list {
  padding: em(100px) 0;
}