<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->
<main [ngClass]="buttons ? 'listing-length' : 'ad-length'">
    <div class="card h-100 product-card">
        <div class="imgContainer pt-2">
            <img [src]="redirectUrl + 'api/productImage/' + product.imgGuid" alt="{{product.productName}} termék képe" (click)="!clickToNavigate && navigateToProductInfo()">
        </div>
        <div class="row vertical-line">
            <div class="col d-flex justify-content-center align-items-center">
                <hr class="w-75 border-top border-2 border-secondary">
            </div>
        </div>
        <div class="card-body d-flex flex-column align-items-center justify-content-between">
            <div (click)="!clickToNavigate && navigateToProductInfo()" class="mb-2">
                <div class="card-title fs-4 fw-bold text-secondary text-center">{{product.productName}}</div>
            </div>
            <div class="d-flex flex-column justify-content-between me-2">
                <div class="card-text text-center fs-5 mb-4 text-secondary">
                    <div>
                        <button class="details btn btn-outline-secondary-origin d-flex flex-row align-items-end px-4 py-2 mb-1 w-100 text-center rounded-4 border-secondary" (click)="!clickToNavigate && navigateToProductInfo()">
                            <span class="details-text text-uppercase text-secondary w-100">Részletek</span>
                        </button>
                    </div>
                    <span>{{product.price | hufCurrencyPipe}}</span>
                    <div [ngClass]="{
                        'productAvailable': product.productAvailability === 'Keszleten',
                        'productUnavailable': product.productAvailability === 'Rendelheto'
                        }">{{product.productAvailability | productAvailabilityPipe}}</div>
                </div>
                @if(buttons){
                    <div>
                        <!-- <button class="btn btn-outline-secondary-origin d-flex flex-row align-items-end px-4 py-2 mb-1 w-100 text-center rounded-4" (click)="!clickToNavigate && navigateToProductInfo()">
                            <span class="text-secondary w-100 text-uppercase">Részletek</span>
                        </button> -->
                        <button class="btn btn-primary d-flex flex-row align-items-end px-4 py-2 w-100 text-center rounded-4" (click)="!clickToNavigate && addToCart()">
                            <span class="me-2 text-uppercase">Kosárba</span>
                            <img class="basketIcon" src="./assets/icons/kosar.svg" alt="Kosár">
                        </button>
                    </div>
                }
            </div>
        </div>
    </div>
</main>

.listing-length {
    height: 600px;
}

.ad-length {
    height: 450px;
    pointer-events: none;
}

main {
    font-family: 'Gotham';
    font-weight: 500;
    font-style: normal;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;

    .details{
        border-width: 2px;
        
        .details-text {
            font-family: 'Gotham';
            font-weight: bold;
            font-style: normal;
            font-display: swap;
            font-size: 14px !important; 
        }
    }


    .card {
        border: none;

        .vertical-line{
            margin-top: -20px;
        }

        .card-title {
            font-family: 'Gotham';
            font-weight: 300;
            font-style: normal;
            font-display: swap;
            font-size: 19px !important;
        }

        .card-text {
            font-family: 'Gotham Book';
            font-weight: normal;
            font-style: normal;
            font-display: swap;
            font-size: 16px !important;

            .newPriceText {
                font-family: 'Gotham Book';
                font-weight: normal;
                font-style: normal;
                font-display: swap;
                font-size: 18px !important;
            }
        }

        .card-body {
            .non-discounted-card {
                padding-top: 26px;
            }
        }
    
        .imgContainer {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 20rem;
    
            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                object-position: center;
            }
        }
    
        .quantityPicker {
            max-width: 3rem !important;
            min-width: 3rem !important;
            width: 3rem !important;
        }
    
        .input-group {
            input {
                padding: 5px !important;
            }
        }
    
        .input-group-text {
            min-width: 2.5rem;
        }
    
        .oldPriceText {
            font-size: 0.9rem;
        }
    
        .text-danger {
            color: red !important;
        }
    }
}

Please redesign this Angular component in a horizontal - wider way. It is now a vertically extending card, but I would like to to be a wide card instead.