Максим Власов

<div class="catalog__list">
                        <div class="catalog__item catalog__item_1"></div>
                        <div class="catalog__item catalog__item_2"></div>
                        <div class="catalog__item catalog__item_3"></div>
                        <div class="catalog__item catalog__item_4"></div>
                        <div class="catalog__item catalog__item_5"></div>
                        <div class="catalog__item catalog__item_6"></div>
                    </div>

.catalog {

    &__list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(toRem(393), 1fr));
        grid-column-gap: toRem(25);
        grid-row-gap: toRem(25);
        grid-auto-rows: toRem(393);
        grid-auto-flow: dense;
    }

    &__item {
        background-color: #eee;

        &_1, &_5 {
            grid-column: span 2; 
            grid-row: span 2;
        }

        &_4 {
            grid-row: span 2; 
        }

        &_6 {
            grid-column: span 3;   
        }
    }

}

почему нельзя просто все стили для блоков компонентов написать в одном файле и просто инлайново в index.html их подключить?

<template>
    <div class="profile">
        {{ name }}
    </div>
</template>

<template>
    <div class="profile">
        @{{ name }}
    </div>
</template>