.card-offer {
  position: relative;
  display: block; 
  background: var(--bs-white);
  border: 1px solid var(--bs-light);
  border-radius: var(--radius-medium);
  color: var(--bs-primary);
  padding: var(--spacing-3);
  text-decoration: none;
  outline: none;

  .card-overlay {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
  }

  .icon-wrapper {
    svg, img {
      transition: transform 0.3s ease;
      transform: scale(1);
    }
  }

  .card-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);

    h2, h3, h4, h5, h6 {
      font-weight: 700;
      font-size: 1.5rem;
      margin: 0;
      color: inherit;
    }
  }

  .card-text {
    font-size: 1rem;
    line-height: 1.5;
  }

  &:after {
    content: '';
    position: absolute;
    top: var(--spacing-3);
    right: var(--spacing-3);
    width: 24px;
    height: 24px;
    background-color: var(--secondary-500);
    mask-image: url("../../assets/images/svg/arrow.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    transition: transform 0.3s ease;
  }

  &:hover,
  &:focus,
  &:focus-visible,
  &:active {
    .icon-wrapper svg,
    .icon-wrapper img {
      transform: scale(1.25);
    }

    &:after {
      transform: rotate(-45deg);
    }
  }

  &:focus-visible {
    outline: 3px solid var(--secondary-500);
    outline-offset: 6px;
  }
}