<template>
    <div v-if="row" class="dl-row">
        <span class="label">{{ row.label }}:</span>

        <strapi-content class="content" :content="row.content" />
    </div>
</template>

<script setup>
const props = defineProps({ row: Object })
</script>

<style lang="scss">
.dl-row {
    grid-template-columns: desktop-vw(40px) 1fr;
    display: grid;
    align-items: flex-start;
    padding-top: desktop-vw(8px);
    border-top: 1px dashed currentColor;

    .label {
        padding-top: 0.4em;
    }
    .content {
        p,
        a {
            @include h6;
        }
        a {
            text-decoration: underline;
        }
    }

    @include mobile() {
        grid-template-columns: mobile-vw(60px) 1fr;
        padding-top: mobile-vw(8px);
    }
}
</style>
