/* {outputFileName:icon-cards} */ /*
  This mixin will build the prefix values for the property and value passed in.
  It will also add the property and value without the prefix.
  Example:
    @include build-prefix-values('transition', 'all 1s linear');
*/ /* 
  Example usage:
    .my-class {
      // Default usage
      @include transition();
      // Custom usage
      @include transition('all', 1s, linear);
    }
*/ /* We declare colors in a map as key: value
with the color name as the key and the hex
as the value

And we are goint to use it in _utils.scss */ .icon__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 10rem;
  margin-right: auto;
  margin-bottom: 5rem;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  text-align: center;
  background-color: var(--color-white);
  box-shadow: 3px 3px 50px 0 rgba(4, 22, 85, 0.15);
  transition: all 0.3s ease-in-out;
} .icon__card:last-child {
  margin-bottom: 0;
} .icon__card_header {
  margin-bottom: 2rem;
} .icon__card_header .icon {
  width: 9.375rem;
  margin-top: -4.6875rem;
  margin-right: auto;
  margin-left: auto;
  border-radius: 50%;
} @media screen and (min-width: 1024px) {
  .icon__card_header .icon {
    width: 15.625rem;
    margin-top: -7.5rem;
  }
} .icon__card_body {
  --margin-bottom: 3.75rem;
  margin-bottom: var(--margin-bottom);
} .icon__card_body .heading {
  margin-bottom: 1.5625rem;
  font-family: "new-spirit", serif;
  font-size: 2.1875rem;
  font-weight: 500;
  line-height: 2.8125rem;
  color: #041655;
  letter-spacing: 0.035rem;
} @media screen and (min-width: 768px) {
  .icon__card_body .heading {
    margin-bottom: 2.5rem;
  }
} .icon__card_body .text {
  max-width: 25ch;
  margin-right: auto;
  margin-bottom: 3.125rem;
  margin-left: auto;
} @media screen and (min-width: 550px) {
  .icon__card_body .text {
    max-width: 48ch;
  }
} @media screen and (min-width: 1024px) {
  .icon__card_body .text {
    max-width: 42ch;
    min-height: 192px;
    margin-bottom: 5rem;
  }
} @media screen and (min-width: 1200px) {
  .icon__card_body .text {
    min-height: 160px;
  }
} @media screen and (min-width: 1320px) {
  .icon__card_body .text {
    min-height: initial;
  }
} .icon__card_body .icons_list {
  gap: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 350px;
  margin-right: auto;
  margin-bottom: 3.125rem;
  margin-left: auto;
} @supports (-webkit-touch-callout: none) and (not (translate: none)) {
  .icon__card_body .icons_list > * {
    margin: calc(2.5rem / 2);
  }
} .icon__card_body .icons_list_item {
  height: 4.6875rem;
} .icon__card_body .icons_list .icon {
  max-width: 4.375rem;
  margin-bottom: 1rem;
} @media screen and (min-width: 1024px) {
  .icon__card_body .icons_list .icon {
    max-width: 5.0625rem;
    height: 77px;
  }
} @media screen and (min-width: 768px) {
  .icon__card_body .icons_list {
    max-width: 17.625rem;
  }
} @media screen and (min-width: 1024px) {
  .icon__card_body .icons_list {
    max-width: 800px;
  }
} .icon__card_body .button {
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
} @media screen and (min-width: 350px) {
  .icon__card_body .button {
    width: -moz-max-content;
    width: max-content;
    min-width: 15.625rem;
  }
} @media screen and (min-width: 1024px) {
  .icon__card_body .button {
    max-width: 20.5rem;
    padding: 1.5625rem 2.25rem;
  }
} @media screen and (min-width: 768px) {
  .icon__card {
    padding-right: 2rem;
    padding-left: 2rem;
  }
} @media screen and (min-width: 1024px) {
  .icon__card {
    margin-bottom: 0;
  }
} @media screen and (min-width: 1200px) {
  .icon__card {
    padding-right: 2.5rem;
    padding-left: 2.5rem;
  }
}