@use '@justeat/fozzie/src/scss/fozzie' as f;

@mixin card-container {
    width: 100%;
    text-decoration: initial;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    &,
    &:hover,
    &:focus {
      color: currentColor;
    }
}

@mixin card-container-wrapped {
  display: flex;
  flex-direction: column;
  flex: 0 0 40%;
  margin: 0 f.spacing() f.spacing(e) 0;
  width: 100%;

  @include f.media('>=narrowMid') {
    margin: 0 f.spacing() f.spacing(e);
  }
}

@mixin card-bg-image {
  width: 100%;
  background-repeat: repeat;
  background-size: cover;
  background-color: f.$color-container-subtle;
  background-position: center;
  border-radius: f.$radius-rounded-c f.$radius-rounded-c 0 0;
}
