.universal-access {
    background-color: #FCFFFF;
    background-image:url('https://storage.googleapis.com/dev_resources_voka_io_303011/common/universal-access-reasons-ellipse.webp'),
        url('https://storage.googleapis.com/dev_resources_voka_io_303011/common/universal-access-reasons.webp');
    background-repeat: no-repeat, no-repeat;
    background-position: 290px top, center right;
    background-size: 32%, cover;
}

.universal-access .content-wrapper {
    padding: 160px 0 140px 100px;
    display: flex;
    flex-direction: column;
    gap: 100px;
    max-width: 1000px;
    box-sizing: content-box;
}

.universal-access .header-image {
    display: none;
}

.universal-access .h2 {
    background: radial-gradient(102% 255.56% at 50% 100%, #09111A 33.3%, #3586EF 76.74%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

.universal-access .subtitle-medium {
    color: var(--n-grey);
    text-align: center;
}

.universal-access .content-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.universal-access .buttons {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin: 0 70px;
    box-sizing: border-box;
}

.universal-access .button {
    background-color: var(--n-white);
    border-radius: 20px;
    border: 1px solid var(--n-very-light-grey);
    box-shadow: 0 0 20px 0 #AAC6EC29;
    width: 420px;
    display: flex;
    flex-direction: column;
    padding: 32px 0;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
}

.universal-access .button .h4 {
    color: var(--n-black);
}

.universal-access .button:hover .h4 {
    color: var(--bright-blue);
}

.universal-access .button-title-wrapper {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.universal-access .button-title-wrapper img {
    height: 32px;
}

@media screen and (max-width: 1919px) {
    .universal-access {
        background-position: 200px top, right center;
        background-size: 35%, cover;
    }

    .universal-access .content-wrapper {
        padding: 120px 0 100px 80px;
        max-width: 748px;
        justify-content: space-between;
        height: 298px;
        gap: unset;
    }

    .universal-access .button-title-wrapper {
        gap: 10px;
    }

    .universal-access .buttons {
        margin: 0 4px;
    }

    .universal-access .button {
        width: 360px;
        padding: 24px 0;
    }
}

@media screen and (max-width: 1439px) {
    .universal-access .content-wrapper {
        padding: 100px 0 102px 60px;
        height: 266px;
        max-width: 675px;
    }

    .universal-access .buttons {
        margin: 0 8px;
    }

    .universal-access .button {
        width: 320px;
        padding: 20px 0;
    }

    .universal-access {
        background-position: 174px top, center center;
        background-size: 34%, cover;
    }
}

@media screen and (max-width: 1279px) {
    .universal-access .content-wrapper {
        max-width: 640px;
    }
}

@media screen and (max-width: 1079px) {
    .universal-access {
        background-image: none;
    }

    .universal-access .header-image {
        display: flex;
    }

    .universal-access .header-image img {
        width: 100%;
    }

    .universal-access .content-wrapper {
        padding: 24px 40px 80px;
        gap: 48px;
        height: unset;
        max-width: unset;
        background-color: #F0F5FB;
    }

    .universal-access .buttons {
        margin: 0;
        justify-content: center;
    }
}

@media screen and (max-width: 576px) {
    .universal-access {
        background-repeat: no-repeat;
        background-position: 0 370px;
        background-size: contain;
    }

    .universal-access .content-wrapper {
        padding: 24px 16px 60px;
        gap: 24px;
    }

    .universal-access .button {
        width: 100%;
    }

    .universal-access .buttons {
        flex-direction: column;
    }
}