@use "../theme/colors" as *;

#simulator {
    #calculators {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
        grid-gap: 1rem;
        justify-content: center;

        .calculator {
            background: #0000004d;
            height: 280px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border-radius: 12px;
            overflow: hidden;

            h2 {
                background-color: $main-color;
                margin: 0;
                padding: 1rem;
                text-align: center;
            }

            .content {
                padding: 1rem;
            }

            .btn {
                margin: 1rem;
            }
        }
    }
}

.modal-body {
    max-width: 1200px;
}