.warranty-card {
  display: flex;
  width: 21.4375rem;
  padding: var(--Card-Warranty-Card-Vertical-Padding, 24px)
  var(--Card-Warranty-Card-Horizontal-Padding, 24px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Card-Warranty-Card-Gap, 24px);
  border-radius: var(--Card-Radius, 24px);
  background: var(--Card-Warranty-Card-Background, #fff);
  box-shadow: var(--Depth-Positive-S, 2px) var(--Depth-Positive-S, 2px)
  var(--P08, 8px) 0 rgb(0 0 0 / 8%);

  & .icon-tag-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;

    & .icon-wrapper {
      display: flex;
      width: var(--Card-Warranty-Card-Bg-Icon-Size, 56px);
      height: var(--Card-Warranty-Card-Bg-Icon-Size, 56px);
      justify-content: center;
      align-items: center;
      aspect-ratio: 1/1;
      border-radius: var(--Card-Warranty-Card-Radius-Icon, 9999px);
      background: var(--Card-Warranty-Card-Background, #fff);

      & picture {
        width: var(--Card-Warranty-Card-Icon-Size, 32px);
        height: var(--Card-Warranty-Card-Icon-Size, 32px);
        object-fit: cover;
      }

      & img {
        width: var(--Card-Warranty-Card-Icon-Size, 32px);
        height: var(--Card-Warranty-Card-Icon-Size, 32px);
        object-fit: cover;
      }
    }

    & .tag {
      align-self: flex-start;
    }
  }

  &.default-neutral {
    & .icon-tag-wrapper {
      & .icon-wrapper {
        background: var(--Card-Warranty-Card-Background-Neutral, #F4F4F0);

        & .icon {
          color: var(--Card-Warranty-Card-Icon-Neutral);
        }
      }
    }
  }

  &.mobility {
    background: var(--Card-Warranty-Card-Background-Mobilty, #e5f1ff);

    & .icon-tag-wrapper {
      & .icon-wrapper {
        & .icon {
          color: var(--Card-Warranty-Card-Icon-Mobility, #004aad);
        }
      }
    }
  }

  &.welfare {
    background: var(--Card-Warranty-Card-Background-Welfare, #fff0e5);

    & .icon-tag-wrapper {
      & .icon-wrapper {
        & .icon {
          color: var(--Card-Warranty-Card-Icon-Welfare, #ff6200);
        }
      }
    }
  }

  &.property {
    background: var(--Card-Warranty-Card-Background-Property, #e5fff4);

    & .icon-tag-wrapper {
      & .icon-wrapper {
        & .icon {
          color: var(--Card-Warranty-Card-Icon-Property, #00a86b);
        }
      }
    }
  }

  &.savings {
    background: var(--Card-Warranty-Card-Background-Savings, #e5fff4);

    & .icon-tag-wrapper {
      & .icon-wrapper {
        & .icon {
          color: var(--Card-Warranty-Card-Icon-Savings, #00a86b);
        }
      }
    }
  }

  &.default-mobility {
    & .icon-tag-wrapper {
      & .icon-wrapper {
        background: var(--Card-Warranty-Card-Background-Mobilty, #e5f1ff);

        & .icon {
          color: var(--Card-Warranty-Card-Icon-Mobility, #004aad);
        }
      }
    }
  }

  &.default-welfare {
    & .icon-tag-wrapper {
      & .icon-wrapper {
        background: var(--Card-Warranty-Card-Background-Welfare, #fff0e5);

        & .icon {
          color: var(--Card-Warranty-Card-Icon-Welfare, #ff6200);
        }
      }
    }
  }

  &.default-property {
    & .icon-tag-wrapper {
      & .icon-wrapper {
        background: var(--Card-Warranty-Card-Background-Property, #e5fff4);

        & .icon {
          color: var(--Card-Warranty-Card-Icon-Property, #00a86b);
        }
      }
    }
  }

  &.default-savings {
    & .icon-tag-wrapper {
      & .icon-wrapper {
        background: var(--Card-Warranty-Card-Background-Savings, #e5fff4);

        & .icon {
          color: var(--Card-Warranty-Card-Icon-Savings, #00a86b);
        }
      }
    }
  }

  & .text-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
    gap: var(--Card-Warranty-Card-Text-Gap, 8px);

    & .title {
      color: var(--Card-Warranty-Card-Title, #001c35);
      font: var(--Heading);
      letter-spacing: -0.24px;
    }

    & .description {
      color: var(--Card-Warranty-Card-Body, #001c35);
      font: var(--Body-Base);
      flex: 1;
    }
  }
}

/* the card has to be hidden if i'm not in author mode */
html:not(.adobe-ue-preview, .adobe-ue-edit) {
  .warranty-card {
    &.hidden {
      display: none;
    }
  }
}

/* TABLET */
@media (width >= 768px) {
  .warranty-card {
    width: 22.75rem;
  }
}

/* DESKTOP SMALL */
@media (width >= 1280px) {
  .warranty-card {
    width: 24.625rem;
  }
}

/* DESKTOP — width in rem scales proportionally above 1440px via root font-size */
@media (width >= 1440px) {
  .warranty-card {
    width: 26.65625rem;
  }
}