.offres,
.offres_grp,
.offres_tmp {
  .col-md-4 {
    transition: all 150ms ease-out;
    @media screen and (max-width: 992px) {
      margin-bottom: 30px;
    }
  }
  .pricing-item {
    border-radius: 20px;
    transition: all 150ms ease-out;
    .h6 {
      display: block;
      margin-top: 0px;
      font-size: 12px;
      font-style: italic;
    }
    &:hover {
      transform: scale(1.05);
      .card-body {
        box-shadow: 2px 0px 15px rgba(0, 0, 0, 0.05);
      }
    }
    .card-body {
      padding: 20px 10px;
      margin-top: 10px;
      background: white;
      border-radius: 20px;
    }
    ul li {
      margin-bottom: 10px;
    }
    .pricing-divider {
      border-radius: 20px;
      background: #000;
      padding: 10px;
      position: relative;
      h3 {
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 30px;
      }
      h4,
      .h4 {
        margin-top: 0;
        margin-bottom: 20px;
      }
    }
    .btn-black {
      background: white;
      color: var(--color-font);
      border: 1px solid var(--color-font);
    }
    small {
      font-size: 14px !important;
      margin-top: 10px;
      display: inline-block;
    }
    &.color-1 {
      h3,
      h4,
      .h4,
      .h3,
      .h6 {
        color: white;
        font-weight: bold;
      }

      .pricing-divider {
        background: var(--color-font);
        background: black;
      }
      .btn-black:hover {
        background: black;
        color: white;
      }
    }
    &.color-2 {
      .btn {
        color: var(--color-primary);
        &:hover {
          color: black;
        }
      }
      h3,
      h4,
      .h4,
      .h3,
      .h6 {
        color: var(--color-primary);
        font-weight: bold;
      }

      .btn-black:hover,
      .pricing-divider {
        background: var(--color-secondary);
        background: black;
      }

      .btn-black:hover {
        background: black;
        color: var(--color-primary);
      }
    }
    &.color-3 {
      .btn {
        color: var(--color-marron);
        &:hover {
          color: black;
        }
      }
      h3,
      h4,
      .h4,
      .h3,
      .h6 {
        color: var(--color-marron);
        font-weight: bold;
      }
      .pricing-divider {
        background: var(--color-marron);
        background: black;
      }
      .btn-black:hover {
        background: black;
        color: var(--color-marron);
      }
    }
    .btn-custom {
      background: var(--color-primary);
      color: var(--color-marron) !important;
      color: #fff;
      border-radius: 8px;
    }
  }
}