.vip_title {
    margin: 0 0 var(--offset-md-2xs);
}

.vip_desc {
    margin-bottom: var(--offset-md-2xs);
    font-weight: 700;
}

.vip_image {
    width: 288px;
    height: 260px;
    margin: 0 auto var(--offset-md-l);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.vip_cards {
    margin-bottom: var(--offset-md-l);
}

.cards {
    grid-row-gap: var(--offset-sm-l);
    text-align: left;
    grid-template-columns: 285px;
    justify-content: center;
    align-items: center;
    display: grid;
    position: relative;
}

.cards_wrap {
    border-radius: var(--border-radius-m);
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.cards_wrap:before {
    content: "";
    z-index: 0;
    width: 285px;
    height: 184px;
    position: absolute;
    top: -50px;
    left: -170px;
    transform: rotate(-35deg);
}

.vip .card_effect:before {
    background: #2d4941;
}

.cards_item {
    width: 100%;
    height: 100%;
    padding: var(--offset-sm-l);
}

.cards_title {
    margin-bottom: var(--offset-sm-s);
    font: var(--subtitle-lg-bold);
    color: var(--color-text-accent);
    display: inline-block;
}

.cards_desc {
    font: var(--body-text-semibold);
}

@media (min-width: 768px) {
    .vip_desc {
        margin-bottom: var(--offset-md-l);
    }

    .vip_image {
        width: 688px;
        height: 353px;
    }

    .vip_cards {
        margin-bottom: var(--offset-lg-l);
    }

    .cards {
        grid-column-gap: var(--offset-sm-l);
        grid-template-columns: repeat(3, minmax(219px, 357px));
    }

    .cards_item {
        padding: var(--offset-md-2xs);
    }

    .cards_title {
        margin-bottom: var(--offset-sm-l);
    }
}

@media (min-width: 1024px) {
    .vip_desc {
        margin-bottom: var(--offset-lg-xs);
    }

    .vip_image {
        width: 944px;
        height: 485px;
    }
}

@media (min-width: 1200px) {
    .vip_image {
        width: 1104px;
        height: 568px;
    }
}