html-css-practice-two/src/styles/layouts/_service.scss

.service {
  max-width: 428px;
  margin-inline: auto;

  &__container {
    @include size(auto, auto);

    position: relative;
  }

  &__background-color {
    @extend %absolute;
    @include set-location($top: 200px, $left: 0);
    @include size(100%, 50%);

    background: linear-gradient(
      180deg,
      rgba(253, 197, 94, 0.01) 0%,
      rgba(253, 197, 94, 0.1) 50%,
      rgba(253, 197, 94, 0) 100%
    );
  }

  &__img-container {
    padding-top: 75px;
    position: relative;
    width: fit-content;
  }

  &__main-img {
    @extend %absolute;
    @include set-location($top: 73px, $left: 35px);
  }

  &__vegetable-img {
    @extend %absolute;
    @include set-location($bottom: -10px, $left: 50px);
    z-index: 4;
  }

  &__content {
    margin-top: 61px;
    padding-inline: 24px;

    z-index: 1;
  }

  &__heading {
    margin-top: 30px;
    font-size: $fs-xx-lg;
    line-height: 129.9%;
    font-weight: 700;
    max-width: 380px;
  }

  &__description {
    margin-top: 29px;
    max-width: 381px;
  }

  &__category {
    @extend %d-flex;
    @include flex-layout(
      $direction: column,
      $justify: space-between,
      $gap: 40px
    );

    max-width: 514px;
    margin-top: 81px;
    &-list {
      @extend %d-flex;
      @include flex-layout($direction: column, $gap: 33px, $justify: center);
    }
  }

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

  &__name-category {
    text-transform: capitalize;
  }

  &__btn {
    display: inline-block;
    margin-top: 43px;
    text-transform: capitalize;
    padding: 10px 20px;

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

@media screen and (min-width: 600px) {
  .service {
    max-width: $max-width;

    &__img-container {
      margin-inline: auto;
    }

    &__main-img {
      @include set-location($top: 30px, $left: 25px);
    }

    &__heading {
      max-width: unset;
    }

    &__description {
      max-width: 690px;
    }

    &__category {
      @include flex-layout($direction: row, $gap: 10px);

      margin-top: 29px;
    }
  }
}

@media screen and (min-width: 840px) {
  %absolute_840 {
    position: absolute;
  }

  .service {
    &__container {
      @include flex-layout($align: center);

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

    &__img-container {
      @include size($width: 100%);

      max-width: 460px;
    }

    &__img-container {
      @include size(100%, 619px);
    }

    &__background-img {
      @include set-location($top: 100px, $left: 0);
      @extend %absolute_840;
    }

    &__background-color {
      @include set-location($top: 400px, $left: -100px);
      @include size(400px, 50%);

      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(253, 197, 94, 0.2),
        rgba(253, 197, 94, 0.1),
        rgba(253, 197, 94, 0.01),
        rgba(253, 197, 94, 0)
      );
    }

    &__main-img {
      @include set-location($top: 55px, $left: 25px);
      @extend %absolute_840;
    }

    &__vegetable-img {
      @include set-location($bottom: 180px, $left: 50px);
      @extend %absolute_840;
    }

    &__heading {
      max-width: 452px;
      margin: unset;
    }
  }
}

@media screen and (min-width: 1200px) {
  %absolute_1200 {
    position: absolute;
  }

  .service {
    &__container {
      @include flex-layout($align: center, $gap: 150px);
    }

    &__background-img {
      @include set-location($top: 0, $left: 0);
      @extend %absolute_1200;
    }

    &__img-container {
      margin-inline: unset;
    }

    &__background-color {
      @include set-location($left: -151px);
      @include size(500px, 50%);

      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(253, 197, 94, 0.3),
        rgba(253, 197, 94, 0.2),
        rgba(253, 197, 94, 0.1),
        rgba(253, 197, 94, 0.06),
        rgba(253, 197, 94, 0.01),
        rgba(253, 197, 94, 0),
        rgba(253, 197, 94, 0)
      );

      clip-path: polygon(30% 0, 100% 0, 100% 100%, 30% 100%);
    }

    &__description {
      margin-top: 21px;
    }

    &__main-img {
      @include set-location($top: 45px, $left: 70px);
    }

    &__vegetable-img {
      @include set-location($bottom: 35px, $left: 92px);
    }

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

    &__category-list {
      @include flex-layout($gap: 34px);
    }

    &__content {
      padding-top: 69px;
      padding-left: 29px;
    }

    &__btn {
      margin-top: 26px;
    }
  }
}