.main-body
{
    background: var(--surface-color-surface-surface-primary);
    height: 860px;

    padding: 64px 24px !important;
}
body
{
    background: var(--color-dark-scale-dark-500);
}
.main-body .first-title
{
    color: var(--surface-color-surface-text-title);
    text-align: center;
    font-variant-numeric: lining-nums proportional-nums;

/* Headings/Heading Three (H3) */
    font-family: Raleway;
    font-size: 38px;
    font-style: normal;
    font-weight: 600;
    line-height: 45.6px; /* 120% */
    letter-spacing: -0.76px;
}
.main-body .second-title
{
    color: var(--color-dark-scale-dark-300);
    text-align: center;
    font-variant-numeric: lining-nums proportional-nums;
    margin-top: 20px;
    font-family: "Segoe UI";
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: 26.6px; /* 140% */
    letter-spacing: -0.19px;
}
.main-body .main-cards
{
    margin-top: 48px;
}
.main-card
{
    height: 480px;
    /*background: var(--surface-color-surface-surface-brand);*/
    position: relative;
    cursor: pointer;
    /*background-position: center center;*/
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 12px;

}
/* Первая карточка (IT-специалист) */
.row.main-cards .col-12.col-md-6.col-xxl-4:nth-of-type(1) .main-card {
    background-position: center;
}

/* Вторая карточка (Инженер) */
.row.main-cards .col-12.col-md-6.col-xxl-4:nth-of-type(2) .main-card {
    background-position: left;
}

/* Третья карточка (CDTO) */
.row.main-cards .col-12.col-md-12.col-xxl-4:nth-of-type(3) .main-card {
    background-position: right; }
.main-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.60) 100%);
}

.m-card-title
{
    color: var(--surface-color-surface-text-title);
    font-variant-numeric: lining-nums proportional-nums;
    position: absolute;
    width: 100%;
    bottom: 32px;
    padding: 0 24px;
    /* Headings/Heading Five (H5) */
    font-family: Raleway;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32.4px; /* 135% */
    letter-spacing: -0.24px;
}
.m-card-title img
{
    float: right;
    width: 24px;
    height: 24px;
    margin-top: 4px;
}

@media (max-width: 1919px) {
    .main-body
    {
        padding: 64px 54px !important;
        height: 744px;
    }


}
@media (max-width: 1399px) {
    .main-body
    {
        padding: 64px 36px !important;
        height: 1287px;
    }
}
@media (max-width: 767px) {
    .main-body .first-title
    {
        font-size: 24px;
        line-height: 32.4px; /* 135% */
        letter-spacing: -0.24px;
    }
    .main-body .second-title
    {
        font-size: 15px;
    }
    .main-body
    {
        padding: 64px 15.5px !important;
        height: 1719px;
    }
}
@media (min-width: 1920px){

    .main-card{
        height: auto;
        aspect-ratio: 1.22 / 1;
    }


}