why my card doesn't expand inside the carousel

Question

I need to make my card expand when the mouse hovers over it and when the mouse leaves the card goes back to its original size, all inside a carousel.

I even managed to get it to expand and go back to its original size. The problem is that when it expands, the card doesn't go beyond the div (carousel). The card expands to some extent inside the div, but doesn't go beyond it. The final effect I want to have is very similar to the effect achieved by swiping a Netflix card.

I am using Angular 12, material components and my carousel is owl carousel.

My code:

HTML

    <div class="container">
        <h2 class="sessao-titulo">Preferências do usuário</h2>
    
        <div class="seletor carrossel">
          <owl-carousel-o [options]="customOptions">
            <ng-template carouselSlide *ngFor="let card of cardsArray">
              <mat-card class="card">
                <mat-card-content class="corpo-relatorio">
                  <mat-card-title class="titulo-relatorio">
                    {{ card.titulo }}
                  </mat-card-title>
                  <mat-card-subtitle class="descricao-relatorio">
                    {{ card.descricao }}
                  </mat-card-subtitle>
                </mat-card-content>
              </mat-card>
            </ng-template>
          </owl-carousel-o>
        </div>
      </div>

TS

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { OwlOptions } from 'ngx-owl-carousel-o';
import { Card } from '../card.model';
import { CardService } from '../card.service';

    @Component({
      selector: 'app-card',
      templateUrl: './card.component.html',
      styleUrls: ['./card.component.scss']
    })
    export class CardComponent implements OnInit {
    
      cardsArray: Card[] = [];
    
      customOptions: OwlOptions = {
        loop: false,
        mouseDrag: true,
        touchDrag: true,
        pullDrag: true,
        dots: false,
        navSpeed: 700,
        navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
        responsive: {
          0: {
            items: 1
          },
          400: {
            items: 2
          },
          740: {
            items: 3
          },
          940: {
            items: 5
          }
        },
        nav: true
      };
    
    
      constructor(
        private router: Router,
        private cardService: CardService
        ) { }
    
      ngOnInit(): void {
        this.cardService.read().subscribe(cardsArray => {
          this.cardsArray = cardsArray
          console.log(this.cardsArray)
        })
      }

CSS

     .container {
          margin-top: 2rem;
          margin-right: 300px;
          margin-left: 5%;
        }
        
        .sessao-titulo {
          margin-left: 5%;
          color: rgb(255, 255, 255);
        }
        
        .carrossel { //responsável pelo carrossel
          background-color: rgba(0, 0, 0, 0.100);
          height: 250px;
        }
        
        .card {
          width: 290px;
          height: 225px;
          margin-top: 12.5px;
          margin-left: 12px;
          background-color: rgb(255, 255, 255);
          border-radius: 10px;
          box-sizing: border-box;
          transition: all 5.5s ease;
        }
        
        .carrossel .card:hover {
          transform: scale(1.5);
          background-color: aqua;
        }
        
        .corpo-relatorio {
          padding: 20px 10px 20px 10px;
        }
        
        .titulo-relatorio {
          color: rgb(0, 0, 0);
          font-size: 18px;
          text-align: center;
          font-weight: 500;
        }
        
        .descricao-relatorio {
          color: rgb(0, 0, 0);
          font-size: 13px;
          padding-top: 5px;
        }