.bentoGrid {
    width: 100%;
    max-width: 1400px;
    height: 100%;
    min-height: 865px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 16px;
    padding: 0 16px;
    overflow: hidden;
}

.bentoElement {
    border-radius: 24px;
}

.reviewsElement {
    grid-area: 1 / 1 / 5 / 2;
    background: url('/assets/misc/grains.webp') center center/cover no-repeat, #191934 radial-gradient(circle at 300% 150%, rgba(127, 140, 210, 0.2) 30%, rgba(0, 0, 0, 0.15) 90%);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.introElement {
    grid-area: 1 / 2 / 6 / 4;
}

.miscElement {
    grid-area: 1 / 4 / 3 / 5;
    background: url('/assets/misc/grains.webp') center center/cover no-repeat, #191934 radial-gradient(circle at -200% 150%, rgba(127, 140, 210, 0.2) 30%, rgba(0, 0, 0, 0.15) 90%);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.contactElement {
    grid-area: 3 / 4 / 5 / 5;
    background: url('/assets/misc/grains.webp') center center/cover no-repeat, #191934 radial-gradient(circle at -150% 150%, rgba(127, 140, 210, 0.2) 30%, rgba(0, 0, 0, 0.15) 90%);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.projectsElement {
    grid-area: 5 / 1 / 9 / 2;
    background: url('/assets/misc/grains.webp') center center/cover no-repeat, #191934 radial-gradient(circle at 300% -120%, rgba(127, 140, 210, 0.2) 30%, rgba(0, 0, 0, 0.15) 90%);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.statsElement {
    grid-area: 6 / 2 / 8 / 4;
    background: url('/assets/misc/grains.webp') center center/cover no-repeat, #191934 radial-gradient(circle at 50% -190%, rgba(127, 140, 210, 0.2) 30%, rgba(0, 0, 0, 0.15) 90%);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.companyElement {
    grid-area: 5 / 4 / 9 / 5;
    background: url('/assets/misc/grains.webp') center center/cover no-repeat, #191934 radial-gradient(circle at -200% -120%, rgba(127, 140, 210, 0.2) 30%, rgba(0, 0, 0, 0.15) 90%);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.profilesElement {
    grid-area: 8 / 2 / 9 / 4;
    background: url('/assets/misc/grains.webp') center center/cover no-repeat, #191934 radial-gradient(farthest-corner at 50% -500%, rgba(127, 140, 210, 0.01) 30%, rgba(0, 0, 0, 0.15) 90%);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

@media only screen and (max-width: 1280px) {
    .bentoGrid {
        min-height: 827px;
    }
}

@media only screen and (max-width: 1080px) {
    .bentoGrid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .introElement {
        grid-area: 1 / 1 / 2 / 3;
    }

    .statsElement {
        grid-area: 2 / 1 / 3 / 3;
    }

    .profilesElement {
        grid-area: 3 / 1 / 4 / 3;
    }

    .reviewsElement {
        grid-area: 4 / 1 / 5 / 2;
    }

    .projectsElement {
        grid-area: 4 / 2 / 5 / 3;
    }

    .miscElement {
        grid-area: 5 / 1 / 6 / 2;
    }

    .contactElement {
        grid-area: 5 / 2 / 6 / 3;
    }

    .companyElement {
        grid-area: 6 / 1 / 7 / 3;
    }
}

@media only screen and (max-width: 576px) {
    .bentoGrid {
        grid-template-columns: repeat(1, 1fr);
    }

    .introElement {
        grid-area: 1 / 1 / 2 / 2;
    }

    .statsElement {
        grid-area: 2 / 1 / 3 / 2;
    }

    .profilesElement {
        grid-area: 3 / 1 / 4 / 2;
    }

    .reviewsElement {
        grid-area: 4 / 1 / 5 / 2;
    }

    .projectsElement {
        grid-area: 5 / 1 / 6 / 2;
    }

    .miscElement {
        grid-area: 6 / 1 / 7 / 2;
    }

    .contactElement {
        grid-area: 7 / 1 / 8 / 2;
    }

    .companyElement {
        grid-area: 8 / 1 / 9 / 2;
    }
}