:root { --blog-card: #efeff1; --blog-ink: #1b1b1b; --blog-blue: #0077ff; }

.blog-list-page { min-height: 0; }
.blog-list-main { width: 1828px; margin: 0 auto; }
.blog-list-main > .page-breadcrumb { width: 100%; }
.blog-index { width: 1828px; min-height: 0; padding: 43.5px 40px 60px; border-radius: 40px; background: #fff; color: var(--blog-ink); }
.blog-index__heading h1 { margin: 0; font-size: 70px; font-weight: 600; line-height: 63px; letter-spacing: -4.2px; }
.blog-index__heading h1 > span { color: var(--blog-blue); }
.blog-index__heading h1 small { display: inline-block; margin-left: 3px; color: #606060; font-size: 36px; font-weight: 600; line-height: 36px; letter-spacing: -1.08px; vertical-align: top; }
.blog-index__heading p { margin: 7px 0 0; font-size: 36px; font-weight: 600; line-height: 36px; letter-spacing: -1.08px; }

.blog-index__controls { margin-top: 33.5px; }
.blog-filters { display: flex; max-width: 1748px; flex-wrap: wrap; gap: 10px; }
.blog-filter { height: 48px; padding: 0 30px; border: 0; border-radius: 40px; background: var(--blog-card); color: var(--blog-ink); font: 500 20px/28px "Manrope", sans-serif; letter-spacing: -.6px; cursor: pointer; transition: color 180ms ease, background 180ms ease, transform 180ms ease; }
.blog-filter.is-active { background: var(--blog-blue); color: #fff; }
.blog-filter:hover:not(.is-active) { background: #dddddf; }
.blog-filter:active { transform: scale(.97); }
.blog-filter:focus-visible, .blog-search:focus-within, .blog-index__more:focus-visible { outline: 3px solid var(--blog-blue); outline-offset: 3px; }
.blog-search { position: relative; display: flex; height: 68px; margin-top: 40px; align-items: center; border-radius: 40px; background: var(--blog-card); }
.blog-search input { width: 100%; height: 100%; padding: 0 72px 0 20px; border: 0; outline: 0; background: transparent; color: var(--blog-ink); font: 500 20px/28px "Manrope", sans-serif; letter-spacing: -.6px; }
.blog-search input::placeholder { color: rgb(27 27 27 / 70%); opacity: 1; }
.blog-search img { position: absolute; top: 18px; right: 20px; width: 32px; height: 32px; }

.blog-index__grid { display: grid; margin-top: 40px; grid-template-columns: repeat(3, 556px); grid-auto-flow: row; gap: 40px; }
.blog-index-card { position: relative; min-width: 0; height: 640px; overflow: hidden; border-radius: 40px; background: var(--blog-card); }
.blog-index-card[hidden] { display: none; }
.blog-index-card__visual { position: relative; height: 350px; overflow: hidden; }
.blog-index-card__visual > img { display: block; width: 100%; height: 350px; object-fit: cover; }
.blog-index-card__visual > span { position: absolute; z-index: 1; top: 20px; left: 20px; display: inline-flex; height: 40px; padding: 0 15px; align-items: center; border-radius: 40px; background: #fff; color: var(--blog-ink); font-size: 16px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.blog-index-card[data-tags~="seo"] .blog-index-card__visual > span:nth-of-type(2) { left: 85.52px; }
.blog-index-card[data-tags~="context"] .blog-index-card__visual > span:nth-of-type(2) { left: 126.13px; }
.blog-index-card[data-tags~="context"] .blog-index-card__visual > span:nth-of-type(3) { left: 261.16px; }
.blog-index-card time { position: absolute; top: 390px; left: 40px; color: rgb(27 27 27 / 50%); font-size: 16px; font-weight: 500; line-height: 20px; }
.blog-index-card h2 { position: absolute; top: 413px; left: 40px; max-width: 476px; margin: 0; font-size: 36px; font-weight: 600; line-height: 36px; letter-spacing: -1.08px; }
.blog-index-card__link { position: absolute; z-index: 2; inset: 0; border-radius: inherit; }
.blog-index-card__link:focus-visible { outline: 3px solid var(--blog-blue); outline-offset: -5px; }
.blog-index__empty { margin: 48px 0 0; color: rgb(27 27 27 / 70%); font-size: 20px; line-height: 28px; text-align: center; }
.blog-index__more { display: flex; width: 225.7px; height: 80px; margin: 40px auto 0; padding: 0 11.7px 0 30px; align-items: center; justify-content: space-between; border: 0; border-radius: 40px; background: var(--blog-ink); color: #fff; font: 700 16px/20px "Manrope", sans-serif; text-transform: uppercase; cursor: pointer; transition: opacity 180ms ease, transform 180ms ease; }
.blog-index__more > span:last-child { display: grid; width: 56.57px; height: 56.57px; place-items: center; }
.blog-index__more > span:last-child::before { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: #2d2d2d; content: ""; transform: rotate(-45deg); }
.blog-index__more img { position: relative; z-index: 1; width: 21px; height: 21px; transform: rotate(-45deg); }
.blog-index__more:hover { opacity: .74; }.blog-index__more:active { transform: scale(.98); }.blog-index__more:disabled { opacity: .55; cursor: default; }

@media (max-width: 1819px) {
  .blog-list-main { width: calc(100% - 32px); margin-top: 32px; }
  .blog-list-main > .page-breadcrumb { width: 100%; margin-top: 0; }
  .blog-index { width: 100%; min-height: 0; padding: 40px; border-radius: 28px; }
  .blog-index__heading h1 { font-size: clamp(52px, 6vw, 70px); line-height: .9; letter-spacing: -.06em; }
  .blog-index__heading p { max-width: 760px; font-size: clamp(24px, 3vw, 36px); line-height: 1; letter-spacing: -.04em; }
  .blog-index__grid { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .blog-index-card { height: 620px; border-radius: 28px; }
  .blog-index-card h2 { font-size: clamp(26px, 2.55vw, 36px); line-height: 1; letter-spacing: -.04em; }
  .blog-index-card time, .blog-index-card h2 { left: 28px; }
}

@media (max-width: 1100px) {
  .blog-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-index-card { height: 620px; }
  .blog-index-card__visual, .blog-index-card__visual > img { height: 330px; }
  .blog-index-card__visual > span { top: 18px; }
  .blog-index-card time { top: 360px; }.blog-index-card h2 { top: 385px; }
}

@media (max-width: 760px) {
  .blog-list-main { width: calc(100% - 24px); margin-top: 20px; }
  .blog-list-main > .page-breadcrumb { width: 100%; margin-top: 0; }
  .blog-index { padding: 24px 12px 12px; border-radius: 24px; }
  .blog-index__heading { padding: 0 8px; }.blog-index__heading h1 { font-size: clamp(42px, 12.4vw, 58px); line-height: .9; }.blog-index__heading h1 small { font-size: 22px; line-height: 1; letter-spacing: -.04em; }.blog-index__heading p { margin-top: 14px; font-size: 21px; line-height: 1.02; letter-spacing: -.04em; }.blog-index__heading p br { display: none; }
  .blog-index__controls { margin-top: 28px; }.blog-filters { max-height: 112px; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; }.blog-filters::-webkit-scrollbar { display: none; }.blog-filter { height: 42px; padding: 0 18px; flex: 0 0 auto; font-size: 14px; line-height: 20px; }
  .blog-search { height: 56px; margin-top: 20px; }.blog-search input { padding-left: 18px; font-size: 16px; }.blog-search img { top: 12px; right: 16px; }
  .blog-index__grid { margin-top: 24px; grid-template-columns: minmax(0, 1fr); gap: 16px; }.blog-index-card { height: 524px; border-radius: 24px; }.blog-index-card__visual, .blog-index-card__visual > img { height: 285px; }.blog-index-card__visual > span { top: 12px; left: 12px; height: 34px; padding: 0 12px; font-size: 13px; }.blog-index-card[data-tags~="seo"] .blog-index-card__visual > span:nth-of-type(2) { left: 69px; }.blog-index-card[data-tags~="context"] .blog-index-card__visual > span:nth-of-type(2) { left: 104px; }.blog-index-card[data-tags~="context"] .blog-index-card__visual > span:nth-of-type(3) { left: 215px; }
  .blog-index-card time { top: 306px; left: 20px; font-size: 15px; }.blog-index-card h2 { top: 330px; left: 20px; max-width: calc(100% - 40px); font-size: clamp(24px, 7.9vw, 30px); line-height: .98; letter-spacing: -.04em; }.blog-index-card h2 br { display: none; }
  .blog-index__more { width: 210px; height: 68px; margin-top: 28px; font-size: 13px; }.blog-index__more > span:last-child { transform: scale(.86); }.blog-index__empty { font-size: 16px; }
}