@use "variables" as *;

:host {
    display: flex;
    background: $color-palette-gray-100;
    flex-direction: column;
    align-items: center;
    border-radius: $border-radius-sm;
    padding: $spacing-1;

    h5 {
        margin: $spacing-1 0 $spacing-4;
    }

    .col-3 {
        padding: 0.25rem;
    }

    ::ng-deep {
        .p-card {
            border-radius: $border-radius-sm;

            .p-card-body {
                min-height: 9rem;

                .p-card-title {
                    font-size: $font-size-md;
                }
            }

            .p-card-header {
                min-height: 5rem;
                padding: 0;
                background-color: $color-palette-primary-100;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: $border-radius-sm $border-radius-sm 0 0;

                i {
                    font-size: $font-size-lg;
                    color: $color-palette-primary-500;
                }
            }

            @media (max-width: $screen-lg-max) {
                .p-card-body {
                    min-height: 12rem;
                }
            }
        }
    }
}
