loi-phan-internship/practice/practice-02/src/styles/components/_card-item.scss

%align-center-col {
  @include flex-layout($align: center, $direction: column);
}

.card {
  @extend %d-flex, %align-center-col;
  @include size(auto, 516px);

  position: relative;

  &__food-image {
    @extend %absolute;
    @include set-location($top: 29px);

    margin: auto;
  }

  &__price {
    @extend %absolute;
    @include set-location($top: 176px, $right: 70px);
    @include size(52px, 52px);

    color: $white;
    border: 4px solid $white;
    border-radius: 50px;
    background-color: $secondary-color;
    text-align: center;
    line-height: 50px;
  }

  &__content {
    @extend %d-flex, %align-center-col, %absolute;
    @include set-location($bottom: 72px);
    @include size(100%, auto);
  }

  &__rate {
    @extend %d-flex;
    @include flex-layout($align: center, $gap: 10px);
  }

  &__star-container {
    @include size(24px, 22px);
  }

  &__avatar-container {
    @include size(74px, 38px);

    position: relative;
  }

  &__avatar {
    &:first-child {
      @extend %absolute;
      @include set-location($left: 38px);

      z-index: 2;
    }

    &:nth-child(2) {
      @extend %absolute;
      @include set-location($left: 19px);

      z-index: 1;
    }

    &:last-child {
      @extend %absolute;
      @include set-location($left: 0);
    }
  }

  &__food-name {
    margin-top: 30px;
    color: $primary-color;
    font-size: $fs-lg;
    font-weight: 600;
  }

  &__food-description {
    @include size(100%, auto);

    max-width: 243px;
    margin-top: 13px;
    text-align: center;
    text-transform: capitalize;
    color: $black;
  }

  &__order-btn {
    @extend %absolute;
    @include set-location($bottom: 0);

    padding: 10px 20px;
    text-transform: capitalize;

    &:hover {
      background-color: $secondary-color;
    }
  }
}