@layer components {
    .section-header {
        @apply flex flex-col gap-2 mb-8;

        h1 {
            @apply text-4xl font-bold;
        }
    }

    .environment-card-list {
        @apply w-full flex flex-col mt-4 gap-0;

        .environment-card {
            @apply grid grid-cols-[minmax(0,1fr)_minmax(10rem,12rem)_16rem_minmax(10rem,11rem)_auto] items-center gap-4 bg-white border border-gray-200 p-4;
        }

        .environment-card:first-child {
            @apply rounded-t-lg;
        }

        .environment-card:last-child {
            @apply rounded-b-lg;
        }
    }

}

@layer utilities {
    .svg-fill-orange {
        filter: invert(28%) sepia(97%) saturate(2340%) hue-rotate(354deg) brightness(99%) contrast(96%);
    }

    .svg-fill-gray {
        filter: invert(43%) sepia(27%) saturate(293%) hue-rotate(183deg) brightness(94%) contrast(91%);
    }

    .svg-fill-green {
        filter: invert(31%) sepia(63%) saturate(2270%) hue-rotate(137deg) brightness(95%) contrast(94%);
    }

    .svg-fill-yellow {
        filter: invert(80%) sepia(78%) saturate(1539%) hue-rotate(345deg) brightness(95%) contrast(95%);
    }

    .svg-fill-red {
        filter: invert(34%) sepia(93%) saturate(3258%) hue-rotate(354deg) brightness(98%) contrast(95%);
    }

    .svg-fill-orange {
        filter: invert(28%) sepia(97%) saturate(2340%) hue-rotate(354deg) brightness(99%) contrast(96%);
    }

    .svg-fill-white {
        filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
    }
}