:root {
  --line-width: 4px;
  --icon-size: 60px;
  --icon-shift: 100px;

  --line-height: calc((100% - (var(--icon-size) * 3) - var(--icon-shift)) / 2);
  
  --scroll-percent: 0%; 
}

.masked-container {
  width: 300px;
  flex-grow: 1;
  height: 100%;
  background-image: linear-gradient(
    to bottom, 
    #293375 var(--scroll-percent), 
    #858C95 var(--scroll-percent)
  ); 
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  mask-image: 
    linear-gradient(#fff, #fff), 
    linear-gradient(#fff, #fff), 
    url('/wp-content/uploads/2026/06/arch.svg'), 
    url('/wp-content/uploads/2026/06/boxes.svg'), 
    url('/wp-content/uploads/2026/06/hammer.svg');
  
  -webkit-mask-image: 
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff),
    url('/wp-content/uploads/2026/06/arch.svg'), 
    url('/wp-content/uploads/2026/06/boxes.svg'), 
    url('/wp-content/uploads/2026/06/hammer.svg');

  mask-size: 
    var(--line-width) calc(var(--line-height) - var(--icon-shift) * 3 / 2),
    var(--line-width) calc(var(--line-height) - var(--icon-shift) * 3 / 2),
    var(--icon-size) var(--icon-size),
    var(--icon-size) var(--icon-size),
    var(--icon-size) var(--icon-size);
    
  -webkit-mask-size: 
    var(--line-width) calc(var(--line-height) - var(--icon-shift) * 3 / 2),
    var(--line-width) calc(var(--line-height) - var(--icon-shift) * 3 / 2),
    var(--icon-size) var(--icon-size),
    var(--icon-size) var(--icon-size),
    var(--icon-size) var(--icon-size);

  mask-position: 
    centercalc(var(--icon-size) + var(--icon-shift) * 3 / 2),
    center calc(100% - var(--icon-size) - var(--icon-shift) * 3 / 2),
    center var(--icon-shift),    
    center center, 
    center calc(100% - var(--icon-shift));
    
  -webkit-mask-position: 
    center calc(var(--icon-size) + var(--icon-shift) * 3 / 2),
    center calc(100% - var(--icon-size) - var(--icon-shift) * 3 / 2),
    center var(--icon-shift),    
    center center, 
    center calc(100% - var(--icon-shift));

  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;

  mask-composite: add;
  -webkit-mask-composite: source-over;
}

.icon-placeholder {
  width: var(--icon-size);
  height: var(--icon-size);
}