Having @media screen rules in my CSS file that appear as follows:
@media screen and (min-width: calc((180px + 40px) * 1 - 40px)) {
#main-form {
width: calc((180px + 40px) * 1 - 40px);
}
#main-projects {
width: calc((180px + 40px) * 1);
}
}
@media screen and (min-width: calc((180px + 40px) * 2 - 40px)) {
#main-form {
width: calc((180px + 40px) * 2 - 40px);
}
#main-projects {
width: calc((180px + 40px) * 2);
}
}
@media screen and (min-width: calc((180px + 40px) * 3 - 40px)) {
#main-form {
width: calc((180px + 40px) * 3 - 40px);
}
#main-projects {
width: calc((180px + 40px) * 3);
}
}
These rules are essentially the same aside from the incremental multiplication values.
I'm considering if it's feasible to consolidate these within a for loop in a CSS file to minimize overall code?