@charset "UTF-8";

/// CTA base styling.
///
/// @name %cta-base
///

%cta-base {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  line-height: 0;
  text-decoration: none;

  .su-cta__img {
    width: 100%;
    min-height: 1px; //IE fix
    z-index: 0;
    transition: transform 0.3s ease-out;
  }

  .su-cta__button {
    @include button-big;
    @include margin(null null 0);
    @include grid-media('xs') {
      width: 100%;
      z-index: 100;
    }

    font-weight: $su-font-regular;
  }

  .su-cta__icon {
    display: none;
  }

  &:hover {
    .su-cta__img {
      transform: scale(1.02, 1.02);
    }

    .su-cta__button {
      background-color: color(bg--reverse);
      text-decoration: none;
    }
  }
}
