.cards__title {
    font-family: adobe-jenson-pro-display,serif;
    font-size: 64px;
    font-weight: 600;
    line-height: 77px;
    margin: 0 0 88px;
    text-align: center;
    text-transform: uppercase
}

.cards__title small {
    color: #1b1b1b;
    display: block;
    font-family: Josefin Sans,sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2em;
    line-height: 1;
    margin: 0 0 30px
}

.cards__logo {
    display: block;
    fill: #000;
    margin: 0 auto;
    width: 323px
}

.cards__card {
    align-content: space-between;
    background-color: #0c0c0c;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    min-height: 521px;
    padding: 135px 56px 56px;
    position: relative;
    text-align: center
}

.cards__card:focus,.cards__card:hover {
    color: #fff;
    text-decoration: none
}

.card__title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: adobe-jenson-pro,serif;
    font-size: 48px;
    letter-spacing: .05em;
    line-height: 58px;
    text-transform: capitalize
}

.card__image {
    overflow: hidden
}

.card__image,.card__image:after {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.card__image:after {
    background-color: #0000004d;
    content: "";
    display: block
}

.card__image img {
    display: block;
    height: 100%;
    margin: 0 auto;
    object-fit: cover;
    transform: scale(1);
    transition: transform .2s ease;
    width: 100%
}

.cards__card:focus .card__image img,.cards__card:hover .card__image img {
    transform: scale(1.1)
}

.card__text {
    position: relative;
    width: 100%
}

.card__link {
    height: 56px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 56px
}

.card__link svg {
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%)
}

.card__link__border {
    height: 56px;
    stroke: #fffdfb;
    width: 56px
}

.card__link__bg {
    height: 49px;
    width: 51px
}

.card__link__arrow,.cards__card:focus .card__link__bg,.cards__card:hover .card__link__bg {
    fill: #fff;
    stroke: #fff
}

.card__link__arrow {
    height: 7px;
    width: 16px
}

.cards__card:focus .card__link__arrow,.cards__card:hover .card__link__arrow {
    fill: #0c0c0c;
    stroke: #0c0c0c
}

.cards__list .splide__pagination {
    margin-top: 28px;
    padding-left: 0
}

.cards__list .splide__pagination li {
    margin: 4px 4px 0
}

.cards__list .splide__pagination__page {
    background-color: #000;
    border: 0;
    border-radius: 50%;
    display: block;
    height: 8px;
    opacity: .2;
    padding: 0;
    transition: opacity .2s ease;
    width: 8px
}

.cards__list .splide__pagination__page.is-active {
    opacity: 1
}

@media (max-width: 1024px) {
    .cards__title {
        font-size:48px;
        font-weight: 400;
        line-height: 58px;
        margin: 0 0 48px
    }

    .cards__title small {
        font-family: Work Sans,sans-serif;
        font-size: 14px;
        line-height: 16px;
        margin: 0 0 22px
    }

    .cards__list {
        margin: 0 -20px
    }

    .cards__card {
        min-height: 276px;
        padding: 48px 40px 40px
    }

    .card__title {
        font-size: 32px;
        line-height: 38px
    }

    .card__link,.card__link__border {
        height: 30px;
        width: 30px
    }

    .card__link__bg {
        height: auto;
        width: 26px
    }

    .card__link__arrow {
        height: auto;
        width: 8px
    }
}

@media (max-width: 767px) {
    .cards__title {
        font-size:32px;
        font-weight: 600;
        line-height: 38px;
        margin: 0 0 37px
    }

    .cards__title small {
        margin: 0 0 16px
    }

    .cards__logo {
        width: 230px
    }

    .cards__card {
        min-height: 420px;
        padding: 64px 40px
    }

    .card__title {
        font-size: 48px;
        line-height: 58px
    }

    .card__link,.card__link__border {
        height: 56px;
        width: 56px
    }

    .card__link__bg {
        height: 49px;
        width: 51px
    }

    .card__link__arrow {
        height: 7px;
        width: 16px
    }
}