.row .col.box {
  color: $text_inverse;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &.no-spacing {
    margin-left: 0;
  }

  &:first-child {
    margin-left: 0;
  }

  .box-content {
    text-overflow: ellipsis;

    .box-text-primary {
      font-size: 1.5rem;
      color: $text_inverse;
    }

    .box-text-secondary {
      font-size: 1.25rem;
    }
  }

  .box-link {
    margin-top: 50px;
    color: $text_inverse;

    a {
      color: $text_inverse;
      font-size: 25px;
      display: block;
      background: #367845;
      padding: 2px 4px;
    }

    @media only screen and (max-width: $breakpoint_notebook) {
      a {
        font-size: 0.9rem;

        i {
          font-size: 1.5rem;
        }
      }
    }
  }
}

.row .col.box.box-left-margin-True:not(:first-child) {
  margin-left: 30px;
}

.box-left-margin-False {
  margin-left: 0;
}

@media only screen and (max-width: $breakpoint_large) {
  .row .col.box {
    padding: 25px;

    .box-content .box-text-primary {
      font-size: 1rem;
    }
  }
}

@media only screen and (max-width: $breakpoint_medium) {
  .row .col.box {
    margin-left: 0;

    &.box-left-margin-True:not(:first-child) {
      margin-left: 0;
    }

    .box-content .box-text-secondary,
    .box-link a {
      font-size: 1rem;
    }
  }
}