.about-us-columns-cards-section{
    display: flex;
    flex-direction: column;
    gap: 120px;
    align-items: center;
    width: 100%;
    max-width: 1920px;
    position: relative;
    padding: 140px 60px 0;
    background-image: url('https://storage.googleapis.com/dev_resources_voka_io_303011/common/about-us-main-page-bg.webp');
    background-size: cover;
}

.about-us-columns-cards-section::after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 1px);
    background: linear-gradient(180deg, rgba(0, 26, 87, 0) 26.62%, #011648 100%);
}

.about-us-columns-cards-header{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.about-us-columns-cards-header .main-h3{
    color: var(--n-white);
    text-align: center;
    max-width: 1400px;
}

.about-us-columns-cards-header .subtitle-semibold{
    color: var(--n-very-light-accent);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px; /* 144.444% */
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.about-us-columns-cards-tab{
    display: flex;
    align-items: center;
    gap: 10px;
}

.about-us-columns-cards-dot{
    background: var(--light-blue);
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.about-us-columns-grid{
    display: grid;
    width: 100%;
    gap: 16px;
    position: relative;
    z-index: 2;
    grid-template-columns: repeat(12, 1fr);
}

.about-us-columns-grid-item{
    grid-column: span 3;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    align-items: start;
    gap: 16px;
    margin-top: auto;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(180deg, rgba(133, 196, 255, 0.20) 0%, rgba(81, 171, 255, 0.00) 100%);
    padding: 32px 32px 160px;
}

.about-us-columns-grid-item.large-item{
    padding-bottom: 200px;
}

.about-us-columns-grid-item .subtitle-semibold{
    color: var(--light-blue);
}

.about-us-columns-grid-item .main-numbers{
    color: var(--n-white);
}

@media (max-width: 1919px) {
    .about-us-columns-cards-section{
        gap: 100px;
        padding: 100px 60px 0;
    }

    .about-us-columns-cards-header .main-h3{
        max-width: 1100px;
    }

    .about-us-columns-grid-item{
        padding: 24px 24px 120px;
    }

    .about-us-columns-grid-item.large-item{
        padding-bottom: 160px;
    }
}

@media (max-width: 1439px) {
    .about-us-columns-cards-section{
        gap: 80px;
        padding: 80px 40px 0;
    }

    .about-us-columns-cards-header .main-h3{
        max-width: 980px;
    }

    .about-us-columns-grid-item{
        gap: 10px;
        border-radius: 16px 16px 0 0;
        padding: 24px 24px 100px;
    }

    .about-us-columns-grid-item.large-item{
        padding-bottom: 140px;
    }

    .about-us-columns-cards-dot{
        width: 8px;
        height: 8px;
        border-radius: 2px;
    }

    .about-us-columns-cards-tab{
        gap: 8px;
    }

    .about-us-columns-cards-header .subtitle-semibold{
        font-size: 16px;
        line-height: 26px;
        letter-spacing: 0.8px;
    }
}

@media (max-width: 1279px) {
    .about-us-columns-cards-section{
        gap: 68px;
        padding: 68px 40px 0;
    }

    .about-us-columns-grid-item{
        padding: 16px 16px 80px;
    }

    .about-us-columns-grid-item.large-item{
        padding-bottom: 110px;
    }

    .about-us-columns-grid-item .subtitle-semibold{
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px; /* 175% */
    }
}

@media (max-width: 1079px) {
    .about-us-columns-cards-section{
        gap: 48px;
        padding: 60px 40px 0;
    }

    .about-us-columns-cards-header .main-h3{
        max-width: unset;
    }

    .about-us-columns-cards-tab{
        gap: 6px;
    }

    .about-us-columns-cards-dot{
        width: 6px;
        height: 6px;
        border-radius: 2px;
    }

    .about-us-columns-grid{
        grid-template-columns: repeat(6, 1fr);
        gap: 12px;
    }

    .about-us-columns-cards-header .subtitle-semibold{
        font-size: 14px;
        line-height: 26px;
        letter-spacing: 0.7px;
    }

    .about-us-columns-grid-item{
        gap: 10px;
        border-radius: 16px 0 0 16px;
        padding: 20px;
        margin-top: unset;
        flex-direction: column-reverse;
        justify-content: start;
        background: linear-gradient(270deg, rgba(97, 144, 255, 0.00) 0%, rgba(97, 144, 255, 0.20) 100%);

        width: calc(100% + 38px);
        padding-right: 40px;
    }

    .about-us-columns-grid-item.large-item{
        padding-bottom: 20px;
    }
}

@media (max-width: 577px) {
    .about-us-columns-cards-section{
        padding: 48px 16px 0;
        align-items: start;
    }

    .about-us-columns-grid{
        column-gap: 8px;
        row-gap: 12px;
    }

    .about-us-columns-cards-header{
        align-items: start;
    }
    
    .about-us-columns-cards-header .subtitle-semibold,
    .about-us-columns-cards-header .main-h3{
        text-align: start;
    }

    .about-us-columns-grid-item .subtitle-semibold{
        font-size: 16px;
        font-weight: 500;
        line-height: 22px; /* 137.5% */
    }

    .about-us-columns-grid-item{
        width: calc(100% + 24px);
        padding-right: 32px;
    }
}