xdevelx

const configSVG = {
  transform: [],
  mode: {
    stack: true // Create a «stack» sprite
  }
};

const configSVG = {
  transform: [{svgo: {
    js2svg: {pretty: true}, // Отключаем минификацию svg.
    plugins: [
      {cleanupListOfValues: {floatPrecision: 0}},
      {inlineStyles: {onlyMatchedOnce: false}},
      {removeAttrs: {attrs: ['stroke', 'data-name']}},
      {removeAttributesBySelector: {selector: ':not([fill="none"])', attributes: ['fill']}}
    ]
  }}],
  mode: {
    stack: true // Create a «stack» sprite
  }
};

.berth {
}

.berth ~ .berth {
}

Реально ли это

.addTaskSection:hover > * {
  background-color: #ff7066;
}

.alert--test {
    position: relative;
}
.alert--test::before {
  position: absolute;
  top: 0;
  right: 0;
}
@media (max-width: 240px) {
  .alert--test::before {
    content: '<=240px';
  }
}
@media (min-width: 241px) and (max-width: 575px) {
  .alert--test::before {
    content: '[241px-575px]';
  }
}
@media (min-width: 1200px) {
  .alert--test::before {
    content: '>=1200px';
  }
}

fixed - Его конечная позиция определяется значениями top, right, bottom и left.

If font is specified as a shorthand for several font-related properties, then:

it must include values for:

<font-size>
<font-family>