.downloads {
  margin: em(50px) em(-10px);
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  li {
    vertical-align: top;
    display: inline-block;
    width: 50%;
    padding: em(10px);
  }
  @media screen and (max-width: $medium_breakpoint) {
    display: block;
    li {
      width: 100%;
    }
  }
}

.download__item {
  width: 100%;
  height: 100%;
  border: em(2px) solid $light_gray;
  padding: em(40px) em(60px) em(40px) em(120px);
  display: block;
  text-decoration: none;
  color: $dark_gray;
  position: relative;
  background: $white;
  min-height: em(124px);
  transition: border-color 0.2s ease-in-out;
  &:hover {
    border-color: $green;
    .download__item__icon {
      background: $green;
    }
    .download__item__icon__arrow {
      transform: translateY(2px);
    }
  }
}

.download__item--page {
  padding: em(30px) em(60px) em(30px) em(30px);
  .download__item__icon {
    top: 50%;
    right: em(10px);
    margin-top: em(-20px);
    background: transparent !important;
    svg {
      fill: $green;
    }
  }
}

.download__item__file {
  display: block;
  position: absolute;
  top: em(25px);
  left: em(25px);
  width: em(70px);
  height: em(70px);
  border-radius: 50%;
  background: $green;
}

.download__item__file__icon {
  width: em(30px);
  height: em(40px);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: em(-15px);
  margin-top: em(-20px);
  text-align: center;
  border: em(2px) solid $white;
  border-radius: em(2px);
  line-height: em(34px);
  font-size: em(11px);
  color: $white;
  font-weight: 500;
  padding: 0 em(5px);
  text-shadow: 1px 0 0 $green, 0 1px 0 $green, -1px 0 0 $green, 0 -1px 0 $green,
  2px 0 0 $green, 0 2px 0 $green, -2px 0 0 $green, 0 -2px 0 $green;
  &:before, &:after {
    display: block;
    content: '';
    position: absolute;
    top: em(-2px);
    right: em(-2px);
  }
  &:before {
    width: em(8px);
    height: em(8px);
    background: $white;
    border-radius: em(2px);
  }
  &:after {
    top: em(-2.5px);
    right: em(-2.5px);
    border: em(4px) solid;
    border-color: $green $green transparent transparent;
  }
}

.download__item__title {
  display: block;
  font-size: em(16px);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: em(3px);
  word-break: break-word;
}

.download__item__description {
  display: block;
  font-size: em(16px);
  font-weight: 300;
  line-height: 1.3;
}

.download__item__icon {
  display: block;
  position: absolute;
  top: em(-2px);
  right: em(-2px);
  width: em(40px);
  height: em(40px);
  text-align: center;
  line-height: em(40px);
  background: $light_gray;
  transition: background 0.2s ease-in-out;
  svg {
    fill: $white;
    display: inline-block;
    width: em(30px);
    height: em(30px);
    vertical-align: middle;
  }
}