@import "../../helpers";
.sf-tile {
  position: relative;
  display: block;
  width: 6.25rem;
  height: 7.5rem;
  margin: 0;
  &__title {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    text-transform: uppercase;
    margin: 0 0 var(--spacer-2xs);
    color: var(--c-black);
    transition: color 150ms ease-in-out;
    @include font(
      --font-tile,
      var(--font-weight--bold),
      var(--h3-font-size),
      1.6,
      var(--font-family--secondary)
    )
  }
  &:active {
    box-shadow: 0px 4px 11px rgba(29, 31, 34, 0.1);
  }
  @include for-desktop {
    --font-tile-weight: var(--font-weight--semibold);
    width: 16rem;
    height: 30.625rem;
    
    &__title {
      margin: 0 0 var(--spacer-xl);
    }
    &:hover {
      box-shadow: 4px 12px 24px rgba(119, 121, 122, 0.25);
      transition: box-shadow 150ms ease-in-out;
    }
  }
}