:root {
    --cards-main-heading-fontsize: 20px;
    --cards-main-heading-fontweight: bold;
    --cards-main-heading-lineheight: 1.33;
    --return-content-fontsize: 14px;
    --return-content-fontweight: bold;
    --return-content-color: #191970;
    --percentage-number-fontsize: 14px;
    --percentage-number-fontweight: bold;
    --percentage-number-color: #191970;
    --percentage-number-fontfamily: 'Lato';
    --ratio-content-fontsize: 14px;
    --ratio-content-fontweight: bold;
    --ratio-content-color: #191970;
    --ratio-number-fontsize: 14px;
    --ratio-number-fontweight: bold;
    --ratio-number-color: #191970;
    --ratio-number-fontfamily: 'Lato';
    --volatility-content-fontsize: 14px;
    --volatility-content-fontweight: bold;
    --volatility-content-fontfamily: 'Roboto';
    --volatility-content-color: #666;
    --month-year-fontsize: 16px;
    --month-year-fontweight: normal;
    --month-year-fontfamily: 'Lato';
    --month-year-color: #8c8cb7;
    --month-year-linegeight: 1.5;
}

@media only screen and (max-width: 768px) {
    :root {
        --cards-main-heading-fontsize: 18px;
        --cards-main-heading-lineheight: 1.49;
        --return-content-fontsize: 14px;
        --return-content-fontweight: 600;
        --ratio-content-fontsize: 14px;
        --ratio-content-fontweight: 600;
        --volatility-content-fontsize: 10px;
        --volatility-content-fontweight: 500;
        --month-year-fontsize: 12px;
        --month-year-fontweight: normal;
        --month-year-fontfamily: 'Roboto';
        --month-year-color: #8c8cb7;
        --month-year-linegeight: 1.33;
    }
}

.portfolios-section {
    background-color: #fff;
    border-radius: 5px;
}

.annualized-cards-container {
    position: relative;
}

.portfolios-image img {
    height: 143px;
    width: 143px;
}

.multi-asset-portfolios__container,
.thematic-portfolios__container {
    overflow: hidden;
}

.cards-main-heading {
    font-size: var(--cards-main-heading-fontsize);
    font-weight: var(--cards-main-heading-fontweight);
    line-height: var(--cards-main-heading-lineheight);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.portfolios-draw {
    width: 157px;
    height: 8px;
    border-radius: 8px;
}

@media only screen and (max-width: 768px) {
    .portfolios-draw {
        width: 108px;
        height: 4px;
    }
}

.return-content {
    font-size: var(--return-content-fontsize);
    font-weight: var(--return-content-fontweight);
    color: var(--return-content-color);
}

.percentage-number {
    font-size: var(--percentage-number-fontsize);
    font-weight: var(--percentage-number-fontweight);
    color: var(--percentage-number-color);
    font-family: var(--percentage-number-fontfamily);
}

.ratio-content {
    font-size: var(--ratio-content-fontsize);
    font-weight: var(--ratio-content-fontweight);
    color: var(--ratio-content-color);
}

.ratio-number {
    font-size: var(--ratio-number-fontsize);
    font-weight: var(--ratio-number-fontweight);
    font-family: var(--ratio-number-fontfamily);
    color: var(--ratio-number-color);
}

.volatility-content {
    font-size: var(--volatility-content-fontsize);
    font-weight: var(--volatility-content-fontweight);
    color: var(--volatility-content-color);
}

.volatility-content .value {
    font-family: var(--volatility-content-fontfamily);
    position: relative;
    top: 1px;
}

.risk-level-section {
    color: #666666;
    font-size: 11px;
    font-weight: 400;
    margin: 4px 0 0;
}

.risk-level-section .risk-value {
    font-weight: 600;
}

.constituent-section__heading {
    font-family: 'Lato';
    color: #191970;
    font-size: 16px;
    text-align: center;
    font-weight: 700;
    margin-bottom: 12px;
}

.portfolio-note__month-year-section {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    gap: 10px;
    @media only screen and (max-width: 768px) {
        flex-direction: column;
    }
}

.portfolios-note {
    font-family: 'Lato';
    color: var(--negative-values__color);
    font-size: 16px;
    font-weight: 700;
}

.month-year {
    font-size: var(--month-year-fontsize);
    font-weight: var(--month-year-fontweight);
    font-family: var(--month-year-fontfamily);
    color: var(--month-year-color);
    line-height: var(--month-year-linegeight);
}