open-learning-exchange/planet

<div class="noticias-destacadas-jojo" *ngIf="deviceType != deviceTypes.MOBILE">
  <div class="containerL">
    <div class="title">
      <div class="tab">
        <img
          class="image"
          src="assets/landing-page/icon/noticias.svg"
          alt="noticias"
          height="24px"
          width="24px"
        />
        Noticias destacadas
      </div>
    </div>
    <div class="news">
      <div>
        <planet-landing-news></planet-landing-news>
      </div>
    </div>
  </div>
  <div class="containerR">
    <div class="title">
      <div class="tab">
        <img
          class="image"
          src="assets/landing-page/icon/calendario.svg"
          alt="noticias"
          height="24px"
          width="24px"
        />
        Calendario y eventos
      </div>
    </div>
    <div class="news" style="padding: 0px 30px 20px;">
      <div class="calendar-container">
        <div class="calendar-box">
          <planet-calendar
            [header]="header"
            [buttonText]="buttonText"
            [resizeCalendar]="resizeCalendar"
            [_events]="events"
          ></planet-calendar>
          <planet-landing-event></planet-landing-event>
        </div>
      </div>
    </div>
  </div>
</div>
<div style="width: 100%" *ngIf="deviceType === deviceTypes.MOBILE">
  <div class="tabs-container">
    <mat-tab-group class="tabs-group" [color]="secondary" (selectedTabChange)="tabChanged($event)">
      <mat-tab>
        <ng-template mat-tab-label>
          <img
            class="image"
            src="assets/landing-page/icon/noticias.svg"
            alt="noticias"
            height="32px"
            width="32px"
          />
          Noticias destacadas
        </ng-template>
        <planet-landing-news></planet-landing-news>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <img
            class="image"
            src="assets/landing-page/icon/calendario.svg"
            alt="noticias"
            height="32px"
            width="32px"
          />
          Calendario y eventos
        </ng-template>
        <div class="calendar-container">
          <div class="calendar-box">
            <planet-calendar
              [header]="header"
              [buttonText]="buttonText"
              [resizeCalendar]="resizeCalendar"
              [_events]="events"
            ></planet-calendar>
            <planet-landing-event></planet-landing-event>
          </div>
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>
</div>