Learn

Performing dynamic mathematical calculations to set property values might sound difficult, but the `calc()` function makes handling mathematical expressions simple. The `calc()` function takes a mathematical expression as its argument and returns the calculated value. We can use the `calc()` function as a value of CSS properties that expect numeric values.

The `calc()` function can be used to perform mathematical operations on a mix of units (`rem`, `vw`, `px`, etc). When performing addition (`+`) or subtraction (`-`), both numbers being operated on must have specified units. Division (`/`) requires the divisor (second operand) to be a unit-less number, and multiplication (`*`) requires one of the operands to be unit-less. Keep in mind that the `calc()` function requires whitespace between the operator and the numbers in the expression. The function can also be used as one of the multiple values for a property or argument in another function.

For example, what if we wanted to dynamically change the left and right `margin` of an element to be 1.5 percent of the viewport width added with `5px`?

``````.item {
margin: 15px calc(1.5vw + 5px);
}``````

Above, we set the top and bottom margins of the `.item` selector to be `15px` and use the `calc()` function to set the left and right margin values by adding `1.5vw` and `5px`. Notice the whitespace on either side of the `+`—it is required to add whitespace between operators and operands in the function.

A full list of operators, expression types, and use cases for `calc()` can be found on the Mozilla Developer Page.

### Instructions

1.

The postcard title should scale depending on the size of the viewport. Inside the `.card-title` selector ruleset, replace the current `font-size` property value with the sum of `2vw` and `1.5rem` using the `calc()` function.

2.

The main card text should be centered no matter the size of the postcard. Inside the `.card-text` selector ruleset add a `left` property and set its value to be the difference of `50%` and half of the `width` property’s value using the `calc()` function.

3.

Now, use the `calc()` function to set the margin on each item listed at the bottom of the postcard.

Navigate to the `ul.activities` selector ruleset and add a `margin` property. Set the first value of the property (for the top and bottom margin) to be the sum of `1vw` and `0.5rem`. The second property (for the left and right margin) value should be `2rem`.