.what-voka-offers {
    background-color: var(--n-white);
}

.what-voka-offers .content-wrapper {
    margin: 140px 100px;
}

.what-voka-offers .header-image-mobile {
    display: none;
}

.what-voka-offers .h2 {
    text-align: center;
    color: var(--n-black);
}

.what-voka-offers .cards-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "card1 card2 card3"
        "card4 card4 card3"
        "card5 card6 card7";
    gap: 16px;
    padding: 80px 0;
}

.what-voka-offers.doctors .cards-wrapper {
padding-bottom: 0;
}

.what-voka-offers .cards-wrapper .card1 {
    grid-area: card1;
}

.what-voka-offers .cards-wrapper .card2 {
    grid-area: card2;
}

.what-voka-offers .cards-wrapper .card3 {
    grid-area: card3;
}

.what-voka-offers .cards-wrapper .card4 {
    grid-area: card4;
}

.what-voka-offers .cards-wrapper .card5 {
    grid-area: card5;
}

.what-voka-offers .cards-wrapper .card6 {
    grid-area: card6;
}

.what-voka-offers .cards-wrapper .card7 {
    grid-area: card7;
}

.what-voka-offers .card {
    background: linear-gradient(328.39deg, rgba(170, 210, 255, 0.4) 12.6%, rgba(230, 241, 255, 0.4) 76.68%);
    display: flex;
    flex-direction: column;
    border-radius: 20px;
}

.what-voka-offers .card .h4,
.what-voka-offers.doctors .card .main-h4 {
    color: var(--n-black);
    margin: 24px auto 12px;
    text-align: center;
}

.what-voka-offers .card .small-text-semibold,
.what-voka-offers.doctors .card .small-text-medium {
    color: var(--n-grey);
    text-align: center;
}

.what-voka-offers .card.regular {
    justify-content: center;
    align-items: center;
    min-height: 300px;
}

.what-voka-offers .card svg{
    height: 60px;
    width: 60px;
}

.what-voka-offers.doctors .card-content-wrapper {
    max-width: 400px;
}

.what-voka-offers .card.double-height {
    justify-content: flex-end;
    align-items: center;
    background: url("https://storage.googleapis.com/dev_resources_voka_io_303011/common/what-offers-teeth.webp") no-repeat center center;
    background-size: cover;
    grid-row: span 2;
    padding-bottom: 48px;
}

.what-voka-offers.doctors .card.double-height {
    background: url("https://storage.googleapis.com/dev_resources_voka_io_303011/common/collection-d.webp") no-repeat center center / cover;

}

.what-voka-offers .card.double-width {
    justify-content: center;
    align-items: center;
    background: url("https://storage.googleapis.com/dev_resources_voka_io_303011/common/what-offers-wide-card.webp") no-repeat center center;
    background-size: cover;
    grid-column: span 2;
    min-height: 400px;
    padding-left: 60%;
}

.what-voka-offers.doctors .card.double-width {
    background: url("https://storage.googleapis.com/dev_resources_voka_io_303011/common/tools-d.webp") no-repeat center center / cover;

}

.what-voka-offers .card.double-height svg,
.what-voka-offers .card.double-width svg {
    display: none;
}

.what-voka-offers .need-more-info {
    padding: 100px 80px;
    border-radius: 20px;
    color: var(--n-white);
    background: url("https://storage.googleapis.com/dev_resources_voka_io_303011/common/need-more-heart.webp") no-repeat center center;
    background-size: cover;
}

.what-voka-offers.doctors .need-more-info {
    display: none;
}



.what-voka-offers .need-more-info .subtitle-medium {
    margin: 16px 0 40px;
}


@media screen and (max-width: 1919px) {
    .what-voka-offers .content-wrapper {
        margin: 100px 80px;
    }

    .what-voka-offers .need-more-info {
        padding: 80px 60px;
        background: url("https://storage.googleapis.com/dev_resources_voka_io_303011/common/need-more-heart.webp") no-repeat 50% center;
        background-size: cover;
    }

    .what-voka-offers .cards-wrapper {
        padding: 60px 0;
    }

    .what-voka-offers .card.regular {
        min-height: 260px;
    }

    .what-voka-offers.doctors .card.regular{
        padding: 32px;
    }

    .what-voka-offers .card.double-width {
        min-height: 300px;
    }

    .what-voka-offers.doctors .card.double-width .card-content-wrapper{
        padding: 32px 40px;
        max-width: 100%;
    }

    .what-voka-offers.doctors .card.double-height{
        padding: 32px 40px;
    }

    .what-voka-offers.doctors .card.double-width{
        padding-left: 50%;
    }

    .what-voka-offers .card svg {
        height: 48px;
        width: 48px;
    }

    .what-voka-offers .card .h4,
    .what-voka-offers.doctors .card .main-h4 {
        margin: 20px auto 10px;
    }

    .what-voka-offers .need-more-info .subtitle-medium {
        max-width: 45%;
    }
}


@media screen and (max-width: 1439px) {
    .what-voka-offers .content-wrapper {
        margin: 80px 60px;
    }

    .what-voka-offers .need-more-info {
        padding: 60px 60px;
    }

    .what-voka-offers .cards-wrapper {
        padding: 48px 0;
    }

    .what-voka-offers .card.double-width {
        min-height: 280px;
    }

    .what-voka-offers .card.regular {
        min-height: 220px;
    }

    .what-voka-offers .card.double-height {
        padding-bottom: 40px;
    }
}


@media screen and (max-width: 1079px) {
    .what-voka-offers {
        background: linear-gradient(302.96deg, #AAD2FF 24.87%, #E6F1FF 80.01%);
    }

    .what-voka-offers .content-wrapper {
        margin: unset;
        padding: 80px 40px;
    }

    .what-voka-offers .card {
        grid-column: unset;
        grid-row: unset;
        padding: 24px;
        gap: 24px;
    }

    .what-voka-offers .card.double-height {
        grid-row: unset;
        padding-bottom: 24px;
    }

    .what-voka-offers .card.double-width,
    .what-voka-offers.doctors .card.double-width {
        grid-column: unset;
        padding-left: 24px;
    }

    .what-voka-offers .cards-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
              "card4"
              "card3"
              "card2"
              "card1"
              "card5"
              "card6"
              "card7";
        padding: 40px 0 60px;
    }

    .what-voka-offers.doctors .cards-wrapper {
        grid-template-areas:
        "card3"
        "card4"
        "card1"
        "card2";
    }

    .what-voka-offers.doctors .card.regular,
    .what-voka-offers.doctors .card.double-height,
    .what-voka-offers.doctors .card.double-width {
        padding: 24px;
    }

    .what-voka-offers .need-more-info {
        padding: 40px 40px;
    }

    .what-voka-offers .card.double-height,
    .what-voka-offers .card.double-width,
    .what-voka-offers .card.regular,
    .what-voka-offers.doctors .card.regular,
    .what-voka-offers.doctors .card.double-height,
    .what-voka-offers.doctors .card.double-width {
        background: linear-gradient(113.64deg, #FBFDFF 22.5%, #D7E9FF 81.34%);
        justify-content: flex-start;
        align-items: flex-start;
        min-height: unset;
        flex-direction: row;
    }

    .what-voka-offers .card.double-height svg,
    .what-voka-offers .card.double-width svg {
        display: block;
    }

    .what-voka-offers .header-image-mobile {
        display: flex;
        justify-content: center;
        height: 345px;
    }

    .what-voka-offers.doctors .header-image-mobile {
        margin-bottom: 60px;
        width: 100%;
        height: auto;
    }

    .what-voka-offers.doctors .header-image-mobile img {
        width: 100%;
    }

    .what-voka-offers .card .h4,
    .what-voka-offers.doctors .card .main-h4 {
        margin: 0 0 8px;
        text-align: start;
    }

    .what-voka-offers .card .small-text-semibold,
    .what-voka-offers.doctors .card .small-text-medium {
        text-align: start;
    }

    .what-voka-offers .card-content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .what-voka-offers .need-more-info .subtitle-medium {
        max-width: 55%;
    }

    .what-voka-offers .card svg {
        min-height: 48px;
        min-width: 48px;
        height: 48px;
        width: 48px;
    }

    .what-voka-offers.doctors .card.double-width .card-content-wrapper{
        padding: 0;
        max-width: 480px;
    }

    .what-voka-offers.doctors .card-content-wrapper {
        max-width: 480px;
    }
}


@media screen and (max-width: 576px) {
    .what-voka-offers .content-wrapper {
        padding: 60px 16px;
        margin: unset;
    }

    .what-voka-offers .need-more-info {
        padding: 311px 20px 32px;
        background: url("https://storage.googleapis.com/dev_resources_voka_io_303011/common/need-more-heart-mobile.webp") no-repeat center center;
        background-size: cover;
        text-align: center;
    }

    .what-voka-offers .need-more-info .subtitle-medium {
        max-width: 100%;
        margin: 12px 0 32px;
    }

    .what-voka-offers .cards-wrapper {
        padding: 32px 0 60px;
    }

    .what-voka-offers .card.double-width {
        padding-left: 20px;
    }

    .what-voka-offers .card.double-height {
        padding-bottom: 20px;
    }

    .what-voka-offers .card {
        padding: 20px;
        gap: 16px;
    }

    .what-voka-offers .card .h4,
    .what-voka-offers.doctors .card .main-h4 {
        line-height: 26px;
    }

    .what-voka-offers .card svg {
        height: 32px;
        width: 32px;
        min-height: 32px;
        min-width: 32px;
    }

    .what-voka-offers .header-image-mobile {
        display: flex;
        justify-content: center;
        height: 172px;
    }

    .what-voka-offers.doctors .header-image-mobile{
        margin-bottom: 24px;
    }
}