.section {
  --padding: var(--spacing-4) var(--spacing-4);
  display: block;

  padding: var(--padding);
}

.section .section__label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.section[data-view-progress] {
  --blur: 3px;
  --opacity: 0.8;
  filter: blur(var(--blur));
  opacity: var(--opacity);
  transition:
    filter 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
}
.section[data-view-progress='far'] {
  --blur: 4px;
  --opacity: 0.5;
}
.section[data-view-progress='close'] {
  --blur: 2px;
  --opacity: 0.8;
}
.section.in-view {
  --blur: 0px;
  --opacity: 1;
}

@container style(--device: tablet) {
  .section {
    --padding: var(--spacing-2) var(--spacing-3);
  }
}

@container style(--device: mobile) {
  .section {
    --padding: var(--spacing-2) var(--spacing-4);
  }
  .section[data-view-progress] {
    --blur: 0px;
    --opacity: 1;
  }
}