@use '../../src/sass/partials/variables';

.icon-card-wrapper {
  height: 225px;
}

.icon-card-wrapper:hover .icon-card svg path {
      fill: var(--white);
    }

.icon-card-wrapper:hover .icon-card__text span {
      color: var(--white);
    }

.icon-card-wrapper:hover .mask-1 a {
        background: var(--drool);
      }

.icon-card-wrapper:hover .mask-2 a {
        background: var(--booger);
      }

.icon-card-wrapper:hover .mask-3 a {
        background: var(--mange);
      }

.icon-card-wrapper:hover .mask-4 a {
        background: var(--treat);
      }

.icon-card-wrapper .icon-card {
    width: 100%;
    height: 100%;
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-size: cover;
  }

@media (--mobile) {

.icon-card-wrapper .icon-card {
      max-width: 95%;
      margin: auto
  }
    }

@media (--mobile-sm) {
      .icon-card-wrapper .icon-card__text {
        font-size: 18px !important;
        letter-spacing: -0.184px !important;
      }

      .icon-card-wrapper .icon-card__media {
        width: 56px;
        height: 56px;
      }
    }

.icon-card-wrapper .icon-card__text {
      font-family: Bitter;
      text-transform: capitalize;
      font-size: 24px;
      font-style: normal;
      font-weight: 600;
      line-height: 110%; /* 26.4px */
      letter-spacing: -0.264px;
    }

.icon-card-wrapper .icon-card svg path {
      transition: fill 200ms ease;
      fill: var(--drool);
    }

.icon-card-wrapper .icon-card.mask-1 {
      mask-image: url('masks/icon-card-mask-1.svg');
    }

@media (--mobile-sm-to-tablet) {

.icon-card-wrapper .icon-card.mask-1 {
        mask-image: url('masks/icon-card-mask-1-tablet.svg')
    }
      }

@media (--mobile-sm) {

.icon-card-wrapper .icon-card.mask-1 {
        mask-image: url('masks/icon-card-mask-1-phone.svg')
    }
      }

.icon-card-wrapper .icon-card.mask-2 {
      mask-image: url('masks/icon-card-mask-2.svg');
    }

@media (--mobile-sm-to-tablet) {

.icon-card-wrapper .icon-card.mask-2 {
        mask-image: url('masks/icon-card-mask-2-tablet.svg')
    }
      }

@media (--mobile-sm) {

.icon-card-wrapper .icon-card.mask-2 {
        mask-image: url('masks/icon-card-mask-2-phone.svg')
    }
      }

.icon-card-wrapper .icon-card.mask-3 {
      mask-image: url('masks/icon-card-mask-3.svg');
    }

@media (--mobile-sm-to-tablet) {

.icon-card-wrapper .icon-card.mask-3 {
        mask-image: url('masks/icon-card-mask-3-tablet.svg')
    }
      }

@media (--mobile-sm) {

.icon-card-wrapper .icon-card.mask-3 {
        mask-image: url('masks/icon-card-mask-3-phone.svg')
    }
      }

.icon-card-wrapper .icon-card.mask-4 {
      mask-image: url('masks/icon-card-mask-4.svg');
    }

@media (--mobile-sm-to-tablet) {

.icon-card-wrapper .icon-card.mask-4 {
        mask-image: url('masks/icon-card-mask-4-tablet.svg')
    }
      }

@media (--mobile-sm) {

.icon-card-wrapper .icon-card.mask-4 {
        mask-image: url('masks/icon-card-mask-4-phone.svg')
    }
      }

.icon-card-wrapper .icon-card a {
      display: flex;
      background: var(--gray-1);
      color: var(--slobber);
      width: 100%;
      height: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: all 200ms ease;
      gap: 24px;
    }

.icon-card__media {
  width: 64px;
  height: 64px;
}
/*# sourceMappingURL=icon-card.css.map */