.about {
    margin-top: 5px;
    padding-bottom: 24px;
}

.about__inner {
    width: 800px;
    margin: 0 auto;
}

.about__header {
    margin-bottom: 0;
}

.about__title {
    font-size: 28px;
    line-height: 32px;
    letter-spacing: .5px;
    color: black;
    margin-bottom: 14px;
}

.about__caption {
    font-size: 15px;
    line-height: 21px;
    letter-spacing: .25px;
    color: #6f6f6f;
    margin-bottom: 14px;
}

.about__sections {
    display: grid;
    grid-template-areas: "merchants merchants e e partners";
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.about__section--merchants {
    grid-area: merchants;
}

.about__section--e {
    grid-area: e;
}

.about__section--partners {
    grid-area: partners;
}

.about__section-title {
    font-size: 18px;
    letter-spacing: .5px;
    font-weight: 400;
    font-family: ProximaNova-Semibold, 'Roboto-Medium', Arial, Helvetica, sans-serif;
    line-height: 24px;
    padding-bottom: 6px;
    border-bottom: 4px solid;
    margin-bottom: 11px;
}

.about__section-title--merchants {
    color: #9b9b9b;
}

.about__section-title--e {
    color: var(--color-secondary);
    font-family: ProximaNovaS-Semibold, 'Roboto-Medium', Arial, Helvetica, sans-serif;
}

.about__section-title--partners {
    color: #4a4a4a;
}

.about__items {
    display: -ms-grid;
    display: grid;
}

.about__items--merchants {
    grid-gap: 8px;
    grid-template:
        "a  b" 155px
        "a  c" 155px / 1fr 1fr;
}

.about__items--e {
    grid-gap: 8px;
    grid-template:
        "e1  e4" 101px
        "e2  e4" 101px
        "e3  e4" 101px / 1fr 1fr;
}

.about__items--partners {
    grid-template: "p1" 318px / 1fr;
}

.about__item {
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    background: #f3f3f3;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    transition: all 200ms ease;
    cursor: pointer;
    flex-direction: column;
    gap: 9px;
    padding: 0 14px;
}

.about__item--users {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    grid-area: a;
}

.about__item--users img {
    width: 34px;
}

.about__item--web-service {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: b;
}

.about__item--web-service img {
    width: 51px;
}

.about__item--staff {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    grid-area: c;
}

.about__item--staff img {
    width: 52px;
}

.about__item--pp {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: e1;
}

.about__item--pp img {
    width: 59px;
}

.about__item--gate {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    grid-area: e2;
}

.about__item--gate img {
    width: 50px;
}

.about__item--dash {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
    grid-area: e3;
}

.about__item--dash img {
    width: 52px;
}

.about__item--platform {
    -ms-grid-row: 1;
    -ms-grid-row-span: 5;
    -ms-grid-column: 3;
    grid-area: e4;
}

.about__item--platform img {
    width: 52px;
}

.about__item--users:hover, .about__item--web-service:hover, .about__item--staff:hover {
    border-bottom: 4px solid #9b9b9b;
}

.about__item--pp:hover, .about__item--gate:hover, .about__item--dash:hover, .about__item--platform:hover {
    border-bottom: 4px solid var(--color-secondary);
}

.about__item--env {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: p1;
}

.about__item--env img {
    width: 60px;
}

.about__item--env:hover {
    border-bottom: 4px solid #4a4a4a;
}

.about__item:hover {
    box-shadow: 0 2px 10px 0 rgba(74, 74, 74, 0.5);
    background: #fff;
}

.about__item-inner {
    padding-top: 52px;
    background-repeat: no-repeat;
    background-position: top center;
}

.about__item-inner--users {
    background-image: url("../img/Client_scheme.svg");
    background-position-y: 7px;
}

.about__item-inner--web-service {
    background-image: url("../img/Web-service_scheme.svg");
}

.about__item-inner--staff {
    background-image: url("../img/Stuff_scheme.svg");
    padding-top: 53px;
}

.about__item-inner--pp {
    background-image: url("../img/Payment_Page_scheme.svg");
}

.about__item-inner--gate {
    background-image: url("../img/Gate_scheme.svg");
}

.about__item-inner--dash {
    background-image: url("../img/Dashboard_scheme.svg");
    padding-top: 53px;
}

.about__item-inner--platform {
    background-image: url("../img/Payment_Platform.svg");
    padding-top: 58px;
}

.about__item-inner--env {
    background-image: url("../img/Payment_Environment.svg");
    padding-top: 60px;
}

.about__item-name {
    font-family: ProximaNova-Medium, 'Roboto-Regular', Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .25px;
    line-height: 18px;
}

.about__list-wrap {
    position: relative;
}

.about__details-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    position: relative;
}

.about__item-details {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    width: 0;
    height: 0;
    transition: opacity 1s ease-in-out;
}

.about__item-details.opened {
    width: 100%;
    height: 100%;
    opacity: 1;
}

.about__details-img-section {
    background-color: #f3f3f3;
    text-align: center;
    padding: 18px 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.about__details-img {
    width: 124px;
}

.about__details-text-section {
    background-color: #dde2e7;
    padding: 32px 48px 24px 40px;
    box-sizing: border-box;
    grid-column-start: 2;
    grid-column-end: 6;
}

.about__details-text-section_mobile {
    position: relative;
    background: #dde2e7;
    padding: 24px 16px 28px;
}

.about__details-name {
    font-family: ProximaNova-Medium, 'Roboto-Regular', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .25px;
    line-height: 20px;
}

.about__details-name_mobile {
    font-family: ProximaNova-Medium, 'Roboto-Regular', Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: .5px;
    margin-bottom: 14px;
}

.about__details-text-wrap {
    height: 263px;
    position: relative;
    overflow-y: auto;
    padding-right: 42px;
}

.about__details-text-wrap.long[data-scrollbar='true']::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(221, 226, 231, 0), #dde2e7 100%);
    width: 100%;
    height: 4em;
}

.about__details-text {
    font-size: 15px;
    line-height: 28px;
    letter-spacing: .25px;
    color: #4a4a4a;
}

.about__details-text_mobile {
    font-size: 15px;
    line-height: 21px;
    letter-spacing: .25px;
}

.about__details-close {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 12px;
    height: 12px;
    cursor: pointer;
    background: url("../img/Close_icon.svg") no-repeat center center;
}

@media screen and (max-width: 1439px) {
    .about__inner {
        width: 640px;
    }

    .about__item--users img {
        width: 26px;
    }

    .about__item--web-service img {
        width: 40px;
    }

    .about__item--staff img {
        width: 40px;
    }

    .about__item--pp img {
        width: 45px;
    }

    .about__item--gate img {
        width: 39px;
    }

    .about__item--dash img {
        width: 40px;
    }

    .about__item--platform img {
        width: 39px;
    }

    .about__item--env img {
        width: 45px;
    }

    .about__details-img {
        width: 91px;
    }

    .about__details-name {
        font-size: 15px;
        line-height: 18px;
    }

    .about__details-text-wrap {
        padding-right: 16px;
    }

    .about__details-img-section {
        justify-content: start;
        gap: 11px;
    }

    .about__item {
        padding: 0 11px
    }
}

@media screen and (max-width: 767px) {
    .about__inner {
        width: auto;
        max-width: 100%;
        padding: 0 24px;
    }

    .about__sections {
        grid-template-areas:
            "merchants"
            "e"
            "partners";
        grid-template-columns: none;
    }

    .about__items {
        display: flex;
        flex-direction: column;
    }

    .about__items--merchants {
        grid-template:
            "a" 82px
            "b" 82px
            "c" 82px;
    }

    .about__items--e {
        grid-template:
            "e1" 82px
            "e2" 82px
            "e3" 82px
            "e4" 82px;
    }

    .about__items--partners {
        grid-template: "p1" 82px;
    }

    .about__item {
        height: 82px;
        grid-template-columns: 100px auto 32px;
        justify-content: start;
        align-items: center;
        gap: 0;
        text-align: left;
        padding: 0;
    }

    .about__details-close {
        top: 30px;
        right: 22px;
    }
}
@media screen and (min-width: 1280px) {
    .about__inner {
        width: auto;
        max-width: 961px;
        margin: 0 319px;
    }
}
@media screen and (min-width: 1610px) {
    .about__inner {
        max-width: 961px;
        width: 100%;
        margin: 0 auto;
    }
}