.under-hiro-cards-section{
    background: var(--d-dark);
}

.under-hiro-cards-section .container{
    margin: 0 auto;
    max-width: 1920px;
    width: 100%;
    padding: 80px 100px 0 100px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;

    border-top: 2px solid;
    border-image-source: radial-gradient(53.55% 54.53% at 46.45% -4.53%, #056CF2 0%, rgba(5, 108, 242, 0) 100%);
    border-image-slice: 2;
}

.under-hiro-cards-section .card{
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    border-radius: 20px;
    width: 100%;
    align-items: start;
    background: var(--d-very-light-blue-gradient);
}

.under-hiro-cards-section .card .h1-small{
    color: var(--n-white);
}

.under-hiro-cards-section .card .main-text-semibold{
    color: var(--n-very-light-accent);
}

@media screen and (max-width: 1919px) {
    .under-hiro-cards-section .container{
        padding: 60px 80px 0 80px;
    }

    .under-hiro-cards-section .card{
        padding: 24px;
    }
}

@media screen and (max-width: 1439px) {
    .under-hiro-cards-section .container{
        padding: 40px 60px 0 60px;
    }

    .under-hiro-cards-section .card{
        gap: 16px;
        padding: 24px;
        border-radius: 16px;
    }
}

@media screen and (max-width: 1079px) {
    .under-hiro-cards-section .container{
        padding: 40px 40px 0 40px;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 576px) {
    .under-hiro-cards-section .container{
        padding: 32px 16px 0 16px;
        grid-template-columns: 1fr;
    }

    .under-hiro-cards-section .card{
        padding: 20px;
        flex-direction: row;
    }
}