.hero-portfolio-block {
  --wrapper-pad-y: 8;
  --visual-pad: 5;

  @media screen and (min-width: 960px) {
    --wrapper-pad-y: 14;
    --visual-pad: 8;
  }

  padding-top: var(--header-height);

  .inner-wrapper {
    padding-top: calc(var(--baseline) * var(--wrapper-pad-y));
    // padding-bottom: calc(var(--baseline) * var(--wrapper-pad-y));
    background-color: var(--background-color-dark);
    border-radius: var(--radius) var(--radius) 0 0;
    gap: 0;
  }

  .block-copy {
    margin-left: auto;
    margin-right: auto;
  }
  .block-heading {
    &:not(:first-child) {
      padding-top: calc(var(--baseline) * 2);
    }
  }
  .block-abstract {
    padding-top: calc(var(--baseline) * 6);
  }

  .block-visual {
    padding-top: calc(var(--baseline) * var(--visual-pad));
  }
  .block-figure {
    border-radius: var(--radius-small);
    overflow: hidden;
  }
}