.ll-category-banner {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  margin-bottom: 2rem;
}

.ll-category-banner__media {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  background: #f6f4f1;
}

.ll-category-banner__image,
.ll-category-banner picture {
  display: block;
  width: 100%;
  height: 100%;
}

.ll-category-banner__image {
  object-fit: cover;
}

.ll-category-banner__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.14) 50%,
      rgba(0, 0, 0, 0.20) 100%
    );
}

.ll-category-banner__overlay .container {
  width: 100%;
}

.ll-category-banner__content {
  max-width: 720px;
  color: #fff;
  padding: 2rem 0 2.5rem;
}

.ll-category-banner__overlay .ll-category-banner__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.8rem, 3vw, 3.25rem);
  line-height: 1.05;
  font-weight: 500;
  color: #fff !important;
}

.ll-category-banner__subtitle {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.45;
  max-width: 48rem;
  color: #fff;
}

@media (max-width: 767px) {
  .ll-category-banner__media {
    aspect-ratio: 4 / 5;
  }

  .ll-category-banner__content {
    padding: 1.25rem 1rem 1.5rem;
    max-width: 100%;
  }

  .ll-category-banner__title {
    font-size: 1.9rem;
  }

  .ll-category-banner__subtitle {
    font-size: 1rem;
    line-height: 1.35;
  }
}