<template>
    <section class="container">
        <div class="row justify-content-center g-5 mb-5 mt-5 px-3">
            <!--  -->
            <div class="col-12 col-md-6 col-lg-4">
                <div class="quality">
                    <h3>
                        <span class="cuantity">+20 años</span>
                        <span class="description">de experiencia en buceo y limpieza subacuática</span>
                    </h3>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <div class="quality">
                    <h3>
                        <span class="cuantity">+5 años</span>
                        <span class="description">de experiencia en compañías petroleras</span>
                    </h3>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <div class="quality">
                    <h3>
                        <span class="cuantity">100%</span>
                        <span class="description">tecnología amigable con el medio ambiente</span>
                    </h3>
                </div>
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
</script>

<style scoped lang="scss">
.quality {
    border: 3px solid #69c8df;

    h3 {
        .cuantity {
            display: block;
            text-align: center;
            margin: -20px auto 0px auto;
            background: white;
            width: 50%;
            font-weight: bold;
            font-size: 25px;
            color: #0300a8;
        }

        .description {
            font-size: 17px;
            text-align: center;
            display: block;
            font-weight: bold;
            width: 80%;
            margin: 10px auto 20px auto;
        }
    }
}

@media (min-width: 1200px) {
    .quality {
        h3 {
            .cuantity {
                font-size: 33px;
            }
            .description {
                font-size: 20px;
            }
        }
    }
}

</style>