.block__info-boxes {
  margin: 2rem 0;

  @media (min-width: 768px) {
    margin: 3rem 0;
  }

  h2 {
    margin-bottom: 2rem;
    font-weight: bold;
  }

  .info-boxes {
    display: grid;
    column-gap: calc(1rem + 5px);
    row-gap: calc(1rem + 5px);

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 1200px) {
      column-gap: 2.625rem;
      grid-template-columns: repeat(4, 1fr);
    }

    .info-box {
      text-decoration: none;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      padding: 1.875rem 1.25rem 2.625rem;
      row-gap: 2.5rem;
      border-radius: 10px;

      &:hover,
      &:focus {
        color: currentColor;

        .info-box__icon-bg {
          width: 8rem;
          height: 8rem;
        }
      }

      .info-box__text {
        display: flex;
        flex-flow: column;
        row-gap: 1rem;
      }

      h3 {
        font-size: 1.5rem;
        padding-right: 2rem;

        &::after {
          content: "";
          position: relative;
          margin-right: -2rem;
          margin-left: 0.5rem;
          left: 0;
          display: inline-flex;
          width: 16px;
          height: 12px;
          background-color: currentColor;
          mask-image: url(../../../images/icons/arrow-right-small.svg);
          mask-position: center;
          transition: left cubic-bezier(0.68, -0.6, 0.32, 1.6) .5s;
        }
      }

      .info-box__icon-wrapper {
        position: relative;
      }

      .info-box__icon {
        position: relative;
        z-index: 2;
        width: 100px;
        height: 80px;
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        transition: background-color .3s ease-in-out;
      }

      .info-box__icon-bg {
        position: absolute;
        z-index: 1;
        display: block;
        width: 7rem;
        height: 7rem;
        background-color: transparent;
        bottom: 50%;
        right: 50%;
        transform: translateX(50%) translateY(50%);
        border-radius: 100px;
        transition: background-color .3s ease-in-out, height .3s ease-in-out, width .3s ease-in-out;
      }
    }
  }
}

.info-box.purple {
  background-color: var(--csa-purple--pastel);
  color: var(--csa-purple--text) !important;

  .info-box__icon {
    background-color: var(--csa-purple);
  }

  &:hover,
  &:focus {
    .info-box__icon-bg {
      background-color: var(--csa-purple);
    }

    .info-box__icon {
      background-color: var(--csa-purple--pastel);
    }
  }
}

.info-box.purple.has-outline {
  outline: 5px solid var(--csa-purple);
}

.info-box.green {
  background-color: var(--csa-green--pastel);
  color: var(--csa-green--text) !important;

  .info-box__icon {
    background-color: var(--csa-green);
  }

  &:hover,
  &:focus {
    .info-box__icon-bg {
      background-color: var(--csa-green);
    }

    .info-box__icon {
      background-color: var(--csa-green--pastel);
    }
  }
}

.info-box.green.has-outline {
  outline: 5px solid var(--csa-green);
}

.info-box.teal {
  background-color: var(--csa-teal--pastel);
  color: var(--csa-teal--text) !important;

  .info-box__icon {
    background-color: var(--csa-teal);
  }

  &:hover,
  &:focus {
    .info-box__icon-bg {
      background-color: var(--csa-teal);
    }

    .info-box__icon {
      background-color: var(--csa-teal--pastel);
    }
  }
}

.info-box.teal.has-outline {
  outline: 5px solid var(--csa-teal);
}

.info-box.blue {
  background-color: var(--csa-blue--pastel);
  color: var(--csa-blue--text) !important;

  .info-box__icon {
    background-color: var(--csa-blue);
  }

  &:hover,
  &:focus {
    .info-box__icon-bg {
      background-color: var(--csa-blue);
    }

    .info-box__icon {
      background-color: var(--csa-blue--pastel);
    }
  }
}

.info-box.blue.has-outline {
  outline: 5px solid var(--csa-blue);
}

.info-box.red {
  background-color: var(--csa-red--pastel);
  color: var(--csa-red--text) !important;

  .info-box__icon {
    background-color: var(--csa-red);
  }

  &:hover,
  &:focus {
    .info-box__icon-bg {
      background-color: var(--csa-red);
    }

    .info-box__icon {
      background-color: var(--csa-red--pastel);
    }
  }
}

.info-box.red.has-outline {
  outline: 5px solid var(--csa-red);
}