loi-phan-internship/practice/practice-02/src/styles/layouts/_platform.scss

.platform {
  &__container {
    max-width: 428px;
    margin-inline: auto;
    padding-top: 26px;
    padding-bottom: 58px;

    background: linear-gradient(
      0,
      rgba(253, 197, 94, 0.15) 0%,
      rgba(253, 197, 94, 0.05) 50%,
      rgba(253, 197, 94, 0) 100%
    );
  }

  &__image-container {
    @include size(auto, 502px);

    position: relative;
    max-width: 100%;
    text-align: right;
  }

  &__main-image {
    @extend %absolute;
    @include set-location($top: 0px, $left: 60px);
  }

  &__image-food:first-child {
    @extend %absolute;
    @include set-location($bottom: 54px, $right: 163px);

    z-index: 1;
  }

  &__image-food:nth-child(2) {
    @extend %absolute;
    @include set-location($bottom: 67px, $right: 118px);

    z-index: 1;
  }

  &__image-food:nth-child(3) {
    @extend %absolute;
    @include set-location($bottom: 92px, $right: 75px);

    z-index: 1;
  }

  &__image-food:nth-child(4) {
    @extend %absolute;
    @include set-location($bottom: 147px, $right: 45px);

    z-index: 1;
  }

  &__content {
    padding-top: 46px;
    padding-left: 25px;
  }

  &__heading {
    font-size: $fs-xx-lg;
    font-weight: 700;
    max-width: 371px;
  }

  &__description {
    font-size: $fs-md;
    color: $black;
    margin-top: 31px;
    max-width: 366px;
  }

  &__store-container {
    @extend %d-flex;
    @include flex-layout($gap: 27px);

    margin-top: 43px;
  }
}

@media screen and (min-width: 840px) {
  .platform {
    &__container {
      @include flex-layout($direction: row-reverse, $align: center);

      display: flex;
      max-width: $max-width;
      max-height: 632px;
      padding-top: 50px;
    }

    &__image-container {
      @include size(100%, 500px);
    }

    &__background-img {
      @include set-location($top: 0px, $right: 0px);

      position: absolute;
    }

    &__main-image {
      @include set-location($top: 0px, $right: 58px, $left: unset);
    }

    &__image-food:first-child {
      @include set-location($bottom: 53px, $right: 160px);
    }

    &__image-food:nth-child(2) {
      @include set-location($bottom: 68px, $right: 117px);
    }

    &__image-food:nth-child(3) {
      @include set-location($bottom: 90px, $right: 70px);
    }

    &__image-food:nth-child(4) {
      @include set-location($bottom: 145px, $right: 43px);
    }

    &__heading {
      max-width: 643px;
    }

    &__description {
      max-width: 550px;
    }
  }
}

@media screen and (min-width: 1200px) {
  .platform {
    &__container {
      @include flex-layout($justify: space-between);

      display: flex;
      padding-top: 122px;
    }

    &__image-container {
      @include size(600px, 632px);

      text-align: right;
    }

    &__main-image {
      @include set-location($top: 20px, $right: 105px);
    }

    &__background-img {
      @include set-location($top: 20px, $right: 00px);
    }

    &__image-food:first-child {
      @include set-location($bottom: -65px, $right: 263px);
    }

    &__image-food:nth-child(2) {
      @include set-location($bottom: -40px, $right: 190px);
    }

    &__image-food:nth-child(3) {
      @include set-location($bottom: -8px, $right: 125px);
    }

    &__image-food:nth-child(4) {
      @include set-location($bottom: 80px, $right: 80px);
    }

    &__heading,
    &__description,
    &__store-container {
      padding-left: 47px;
    }

    &__description {
      margin-top: 52px;
    }
  }
}