/** Colors **/
/** Typography **/
.front-grid {
  background-color: #f37821;
  color: #ffffff; }
  .front-grid.orange {
    background-color: #f37821; }
    .front-grid.orange .front-grid__column__item .overlay {
      background-color: rgba(243, 120, 33, 0.7); }
      .front-grid.orange .front-grid__column__item .overlay:hover {
        background-color: rgba(243, 120, 33, 0.4); }
    .front-grid.orange .link-arrow svg path {
      fill: #f37821; }
  .front-grid.blue {
    background-color: #41bdbb; }
    .front-grid.blue .front-grid__column__item .overlay {
      background-color: rgba(65, 189, 187, 0.7); }
      .front-grid.blue .front-grid__column__item .overlay:hover {
        background-color: rgba(65, 189, 187, 0.4); }
    .front-grid.blue .link-arrow svg path {
      fill: #41bdbb; }
  .front-grid .front-grid__column__item {
    width: 100%;
    position: relative;
    color: #ffffff;
    min-height: 100px; }
    .front-grid .front-grid__column__item::before {
      display: block;
      content: '';
      width: 100%;
      padding-top: 51.72414%; }
      @media (min-width: 600px) {
        .front-grid .front-grid__column__item::before {
          padding-top: 67.88793%; } }
    @media (min-width: 1200px) {
      .front-grid .front-grid__column__item {
        min-height: auto;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
        flex: 1 1 100%; } }
    .front-grid .front-grid__column__item .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 40px 8%;
      -webkit-transition: background-color 300ms ease;
      -o-transition: background-color 300ms ease;
      transition: background-color 300ms ease; }
      @media (min-width: 900px) {
        .front-grid .front-grid__column__item .overlay {
          padding: 60px 8%; } }
    .front-grid .front-grid__column__item .hover-copy,
    .front-grid .front-grid__column__item .front-grid__arrow {
      opacity: 0;
      -webkit-transition: opacity 300ms ease;
      -o-transition: opacity 300ms ease;
      transition: opacity 300ms ease; }
    .front-grid .front-grid__column__item:hover .hover-copy,
    .front-grid .front-grid__column__item:hover .front-grid__arrow,
    .front-grid .front-grid__column__item:hover .hover-image {
      opacity: 1; }
  .front-grid .front-grid__column__item__bg-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%; }
    .front-grid .front-grid__column__item__bg-image img {
      -o-object-fit: cover;
      object-fit: cover;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }
    .front-grid .front-grid__column__item__bg-image .hover-image {
      opacity: 0;
      -webkit-transition: opacity 300ms ease;
      -o-transition: opacity 300ms ease;
      transition: opacity 300ms ease; }
  .front-grid .front-grid__arrow {
    right: 3%;
    bottom: 10px;
    position: absolute; }
  .front-grid .item {
    padding: 40px 8%; }
    @media (min-width: 600px) {
      .front-grid .item {
        padding: 60px 4%; } }
    @media (min-width: 900px) {
      .front-grid .item {
        padding: 60px 8%; } }
  .front-grid h2 {
    color: #ffffff; }
  .front-grid h3 {
    color: #ffffff; }
  .front-grid p {
    display: none;
    font-size: 22px; }
    .front-grid p.larger {
      font-size: 28px; }
    @media (min-width: 1200px) {
      .front-grid p {
        display: block; } }