@use 'abstracts';

.features-section {
    min-height: calc(100vh - var(--neg-nav-height));
    margin-top: var(--neg-nav-height);
    display: flex;
    align-items: center;

    &__wrapper {
        @include abstracts.container-wrapper;
    }

    &__grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-3);

    }
    
    &__card {
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        height: abstracts.rem(300);
        display: flex;
        flex-direction: column;
        padding-inline: var(--space-3);
        justify-content: center;

        &:nth-child(1) {
            grid-column: 1 / span 2;
            grid-row: 1;
        }
        &:nth-child(2) {
            grid-column: 3;
            grid-row: 1;
        }
        &:nth-child(3) {
            grid-column: 1;
            grid-row: 2;
        }
        &:nth-child(4) {
            grid-column: 2 / span 2;
            grid-row: 2;
        }
    }

    &__claim {
        font-size: var(--font-size-xl);
    }

    &__description {
        font-size: var(--font-size-lg);
    }
}