@use './tokens' as blog;

@include blog.block {
  &__banner {
    position: relative;
    min-height: 71.8vh;
    margin: 0 0 25px;
    padding: 96px 0;
    color: var(--argon-text);
    background: transparent;
  }

  &__banner::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: '';
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.15) 35%, rgba(0, 0, 0, 0) 100%);
  }

  &__banner .shape {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  &__banner-container {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding-top: 34px;
    text-align: center;
  }

  &--no-banner &__banner {
    display: none;
  }
}
