.loyalty-points {
    .loyalty-points__item-points span,
    .loyalty-points__title {
        font-size: clamp(24px,2.223vw,32px);
        text-align: center;
        line-height: 1.25;
        font-weight: 600;

        @media (max-width: 767px) {
            font-size: 22px;
        }
    }

    .wrapper {
        background-color: var(--primary-color);
        display: flex;
        flex-direction: column;
        gap: clamp(24px,2.223vw,32px);
        padding: 48px 40px;
        border-radius: 4px;
        
        @media (max-width: 767px) {
            padding: 40px 20px;
        }
    }

    .loyalty-points__items-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(16px,1.667vw,24px);

        @media (max-width: 1200px) {
            grid-template-columns: 1fr;
        }
    }

    .loyalty-points__item {
        display: grid;
        grid-template-columns: 170px auto;
        background-color: white;
        border-radius: 8px;
        overflow: hidden;

        @media (max-width: 767px) {
            grid-template-columns: 1fr;
        }

        .loyalty-points__item-image {
            position: relative;
            padding-top: 250px;
            width: 100%;
            @media (max-width: 767px) {
                padding-top: 50%;
            }

            & img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
    .loyalty-points__item-content {
        padding: clamp(10px,2.431vw,35px);
        display: flex;
        gap: 8px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .loyalty-points__item-title {
        font-weight: 600;
        font-size: 18px;
        line-height: 1.3334;
    }
    .loyalty-points__item-points {
        margin-top: 24px;
        padding: 12px 16px;
        background-color: #C2DAEB59;
        border-radius: 8px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 8px;
        font-weight: 600;
        font-size: clamp(18px,1.528vw,22px);

        & svg {
            margin: auto 0;
        }
    }
}