.page .block-why__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 1rem; }

.page .block-why__item {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  padding: 1.25rem;
  border-radius: var(--border-radius);
  background-color: #F9F9F9;
  text-align: center;
  transition: .3s; }
  .page .block-why__item:before {
    content: '';
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 1.5rem;
    height: 1.5rem;
    background-color: transparent;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yIDYuMzc1djExLjI1YzAgLjIyMi4wMi40MzkuMDYuNjQ5bDIuODM1LTYuNDQ5Yy45MjMtMi4xNSAzLTMuNTc1IDUuMzM0LTMuNTc1aDkuMDc2Yy0uMTgtMS42ODctMS41NTctMy0zLjIyOS0zaC0zLjM1M2MtLjU3OCAwLTEuMTQ2LS4xNi0xLjY0NC0uNDY0TDguOTEgMy40NjRBMy4xNTYgMy4xNTYgMCAwMDcuMjY3IDNINS4yNDhDMy40NTQgMyAyIDQuNTExIDIgNi4zNzV6bTguMjI5IDMuMzc1aDkuNjAyYzEuNjgzIDAgMi43MjMgMS45MDggMS44NTcgMy40MDhsLTMuMjY3IDUuNjU3QzE3LjYzOCAyMC4xNzEgMTYuMjI4IDIxIDE0LjcwNyAyMUg1LjI0OGEzLjE4IDMuMTggMCAwMS0yLjMwOC0xbDMuMzMtNy41NzhjLjY5Ni0xLjYyNSAyLjI0Ny0yLjY3MiAzLjk1OS0yLjY3MnoiIGZpbGw9IiMzMzk1RjIiLz48L3N2Zz4=");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: .3s; }
  .page .block-why__item--small {
    flex: 0 0 100%;
    width: 100%; }
  .page .block-why__item--text {
    background: none;
    padding: 0; }
    .page .block-why__item--text:before {
      content: none; }
  .page .block-why__item--dark {
    color: var(--color-white);
    background-color: var(--main-color); }
    .page .block-why__item--dark:before {
      -webkit-filter: brightness(0) invert(1);
              filter: brightness(0) invert(1); }

.page .block-why__title {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.2; }

.page .block-why__subtitle {
  margin-bottom: .5em;
  padding: 0 2rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4; }

.page .block-why__content {
  font-size: .875rem; }

.page .section--blue .block-why__item {
  background-color: #FDFEFF; }
  .page .section--blue .block-why__item--dark {
    color: var(--color-white);
    background-color: var(--main-color); }
    .page .section--blue .block-why__item--dark:before {
      -webkit-filter: brightness(0) invert(1);
              filter: brightness(0) invert(1); }
  .page .section--blue .block-why__item--text {
    background: none; }
    .page .section--blue .block-why__item--text:hover {
      background-color: transparent; }

/*@media (pointer: fine) {
  .page {
    .block-why {
      &__item {
        &:hover {
          color: var(--color-white);
          background-color: var(--main-color);

          &:before {
            filter: brightness(0) invert(1);
          }
        }

        &--text {
          &:hover {
            color: var(--color-dark);
            background-color: transparent;
          }
        }
      }
    }

    .section {
      &--blue {
        .block-why {
          &__item {
            &:hover {
              background-color: var(--main-color);
            }

            &--text {
              &:hover {
                background-color: transparent;
              }
            }
          }
        }
      }
    }
  }
}*/
@media (min-width: 576px) {
  .page .block-why__item {
    flex: 0 0 calc(50% - .75rem);
    width: calc(50% - .75rem);
    text-align: left; }
    .page .block-why__item--small {
      flex: 0 0 calc(50% - .75rem);
      width: calc(50% - .75rem); }
  .page .block-why__title {
    font-size: 2rem; }
  .page .block-why__subtitle {
    padding-left: 0; } }

@media (min-width: 768px) {
  .page .block-why__title {
    font-size: 2.25rem; }
  .page .block-why__subtitle {
    font-size: 1.25rem; }
  .page .block-why__content {
    font-size: 1rem; } }

@media (min-width: 992px) {
  .page .block-why__item {
    flex: 0 0 calc(40% - .75rem);
    width: calc(40% - .75rem); }
    .page .block-why__item--small {
      flex: 0 0 calc(30% - .75rem);
      width: calc(30% - .75rem); } }

@media (min-width: 1200px) {
  .page .block-why__item {
    flex: 0 0 calc(50% - .75rem);
    width: calc(50% - .75rem); }
    .page .block-why__item--small {
      flex: 0 0 calc(25% - .75rem);
      width: calc(25% - .75rem); }
  .page .block-why__title {
    font-size: 2.625rem; } }