.bondCardsGrid {
    width: 100%;
    padding: 45px 0 23px;
    background-color: var(--bcg-bg, #f5f4f3);
}

.bondCardsGrid--top-none {
    margin-top: 0;
}

.bondCardsGrid--top-small {
    margin-top: 15px;
}

.bondCardsGrid--top-medium {
    margin-top: 30px;
}

.bondCardsGrid--top-large {
    margin-top: 45px;
}

.bondCardsGrid--top-xlarge {
    margin-top: 75px;
}

.bondCardsGrid--bottom-none {
    margin-bottom: 0;
}

.bondCardsGrid--bottom-small {
    margin-bottom: 15px;
}

.bondCardsGrid--bottom-medium {
    margin-bottom: 30px;
}

.bondCardsGrid--bottom-large {
    margin-bottom: 45px;
}

.bondCardsGrid--bottom-xlarge {
    margin-bottom: 75px;
}

.bondCardsGrid__header {
    max-width: 900px;
    margin: 0 0 34px;
}

.bondCardsGrid__heading {
    margin: 0 0 18px;
}

.bondCardsGrid__intro {
    max-width: 760px;
}

.bondCardsGrid__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bondCardsGrid__item {
    min-width: 0;
}

.bondCardsGrid__itemInner {
    height: 100%;
}

.bondCardsGrid__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    min-height: 250px;
    padding: 25px;
    border: 3px solid var(--bcg-card-border, #f5f4f3);
    border-radius: 15px;
    color: var(--bcg-card-text, #000000);
    background-color: var(--bcg-card-bg, #ffffff);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.5s ease;
}

.bondCardsGrid__card:hover,
.bondCardsGrid__card:focus-visible {
    border-color: currentColor;
}

.bondCardsGrid__cardTop {
    display: block;
    margin-bottom: 40px;
}

.bondCardsGrid__title {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    color: inherit;
    font-family: "Open Sans", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.5;
}

.bondCardsGrid__aer {
    display: block;
    width: 100%;
    color: inherit;
    font-family: "Pastiche Grotesque", "Open Sans", sans-serif;
    font-size: 30px;
    font-weight: 500;
    line-height: normal;
}

.bondCardsGrid__cardBottom {
    display: flex;
    align-items: center;
    margin-top: auto;
}

.bondCardsGrid__infoIcon {
    position: relative;
    display: flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-right: 15px;
}

.bondCardsGrid__infoIcon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    background-color: currentColor;
    transform: translate(-50%, -50%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 0.3125C8.69604 0.3125 0.3125 8.69604 0.3125 19C0.3125 29.304 8.69604 37.6875 19 37.6875C29.304 37.6875 37.6875 29.304 37.6875 19C37.6875 8.69604 29.304 0.3125 19 0.3125ZM19 3.1875C27.7485 3.1875 34.8125 10.2515 34.8125 19C34.8125 27.7485 27.7485 34.8125 19 34.8125C10.2515 34.8125 3.1875 27.7485 3.1875 19C3.1875 10.2515 10.2515 3.1875 19 3.1875ZM17.5625 10.375V13.25H20.4375V10.375H17.5625ZM17.5625 16.125V27.625H20.4375V16.125H17.5625Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 0.3125C8.69604 0.3125 0.3125 8.69604 0.3125 19C0.3125 29.304 8.69604 37.6875 19 37.6875C29.304 37.6875 37.6875 29.304 37.6875 19C37.6875 8.69604 29.304 0.3125 19 0.3125ZM19 3.1875C27.7485 3.1875 34.8125 10.2515 34.8125 19C34.8125 27.7485 27.7485 34.8125 19 34.8125C10.2515 34.8125 3.1875 27.7485 3.1875 19C3.1875 10.2515 10.2515 3.1875 19 3.1875ZM17.5625 10.375V13.25H20.4375V10.375H17.5625ZM17.5625 16.125V27.625H20.4375V16.125H17.5625Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.bondCardsGrid__moreInfo {
    width: calc(100% - 61px);
    color: inherit;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.bondCardsGrid__empty {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

@media (max-width: 1023px) {
    .bondCardsGrid {
        padding: 30px 0 20px;
    }

    .bondCardsGrid__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .bondCardsGrid__card {
        min-height: 220px;
        padding: 15px;
    }

    .bondCardsGrid__title {
        font-size: 16px;
    }

    .bondCardsGrid__aer {
        font-size: 22px;
    }

    .bondCardsGrid__infoIcon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
    }

    .bondCardsGrid__infoIcon::after {
        width: 25px;
        height: 25px;
    }

    .bondCardsGrid__moreInfo {
        width: calc(100% - 45px);
        font-size: 14px;
    }
}

@media (max-width: 639px) {
    .bondCardsGrid {
        padding: 15px 0;
    }

    .bondCardsGrid__list {
        grid-template-columns: 1fr;
    }

    .bondCardsGrid__card {
        min-height: 0;
    }
}