Media Queries

// Breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
) !default;

@use '../../../scss/shared' as *;

.entry-title{
    font-size: 30px;
    @include media-breakpoint-up(md){
        font-size: 48px;
    }
}

ngIf mobile

mobile: boolean = false;  

@HostListener('window:resize', ['$event'])
onResize(event: any){
  if (event.target.innerWidth <= 568) { // 768px portrait
    this.mobile = true;
  } else{
    this.mobile = false;
  }
}

html

<div (window:resize) = "onResize($event)" class="single-product">
    <div *ngIf="!mobile"  class="img">
        <img src="https://picsum.photos/600/600" alt="Lorem ipsum">
    </div>
    <div class="single-product-wrap">
        <div class="single-product-caption">
            <h2 class="title">{{data!.title}}</h2>
            <p class="text">{{data!.lead}}</p>
        </div>
        <div *ngIf="mobile" class="img">
            <img src="https://picsum.photos/536/354" alt="Lorem ipsum">
        </div>
        <div class="prices">
            <div class="price-normal">
                Régi ár: <del>{{data!.priceNormal}}</del>
            </div>
            <div class="price-sale">
                Új ár: <ins>{{data!.priceSale}}</ins>
            </div>
        </div>
    </div>
</div>