.perk {
    border-radius: 15px;
    overflow: hidden;
}

.perk--light { --body: #FFF; }
.perk--dark { --body: #F3F2F9; }

.perk--blue { --background: var(--blue10); --color: var(--blue100); --textColor: var(--blue50) }
.perk--yellow { --background: var(--yellow10); --color: var(--yellow100); --textColor: var(--yellow50) }
.perk--green { --background: var(--green10); --color: var(--green100); --textColor: var(--green50) }
.perk--grey { --background: var(--grey10); --color: var(--grey100); --textColor: var(--grey50) }

.perk__top {
    background-color: var(--background);
    aspect-ratio: 335/176;
    display: flex;
    align-items: center;
    justify-content: center;
}

.perk__top svg, .perk__top img { 
    max-width: 50px; 
    color: var(--color);
}

.perk__body {
    background-color: var(--body);
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.perk__title {
    color: var(--color);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2777777778;
    letter-spacing: 0.015em;
}
.perk__text {
    margin: .3125em 0 0;
    color: var(--textColor);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.01em;
}