@keyframes mainBlogRise {
  from {
    opacity: 0;
    transform: translateY(16px); }
  to {
    opacity: 1;
    transform: none; } }

.main-blog {
  padding-bottom: var(--av-section-y);
  background: var(--av-bg); }
  .main-blog .main-blog-head {
    padding: 8px 0 clamp(20px, 3vw, 32px);
    animation: mainBlogRise var(--av-dur-slow) var(--av-ease) both; }
    .main-blog .main-blog-head .main-blog-head-title {
      margin: 0;
      font-size: clamp(1.75rem, 4.5vw, 2.5rem);
      font-weight: 800;
      line-height: 1.2;
      color: var(--av-text); }
      .main-blog .main-blog-head .main-blog-head-title:after {
        content: "";
        display: block;
        width: 56px;
        height: 6px;
        margin-top: 12px;
        border-radius: var(--av-pill);
        background: var(--av-gold); }
  .main-blog .main-blog-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px var(--av-gutter);
    align-items: start; }
    @media (min-width: 992px) {
      .main-blog .main-blog-wrap {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: 40px; }
        .main-blog .main-blog-wrap.main-blog-wrap--solo {
          grid-template-columns: minmax(0, 1fr); } }
  .main-blog .main-blog-left {
    min-width: 0; }
    .main-blog .main-blog-left .main-blog-left-data {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
      margin-bottom: 32px; }
      @media (min-width: 640px) {
        .main-blog .main-blog-left .main-blog-left-data {
          grid-template-columns: repeat(2, minmax(0, 1fr)); } }
      .main-blog .main-blog-left .main-blog-left-data > .article-item {
        min-width: 0;
        padding: 0;
        overflow: visible;
        animation: mainBlogRise var(--av-dur-slow) var(--av-ease) both; }
        .main-blog .main-blog-left .main-blog-left-data > .article-item:nth-child(2) {
          animation-delay: 60ms; }
        .main-blog .main-blog-left .main-blog-left-data > .article-item:nth-child(3) {
          animation-delay: 120ms; }
        .main-blog .main-blog-left .main-blog-left-data > .article-item:nth-child(4) {
          animation-delay: 180ms; }
        .main-blog .main-blog-left .main-blog-left-data > .article-item:nth-child(5) {
          animation-delay: 240ms; }
        .main-blog .main-blog-left .main-blog-left-data > .article-item:nth-child(6) {
          animation-delay: 300ms; }
      .main-blog .main-blog-left .main-blog-left-data .main-blog-left-data-empty {
        grid-column: 1 / -1;
        margin: 0;
        padding: 48px 20px;
        text-align: center;
        color: var(--av-text-muted);
        background: var(--av-surface-2);
        border: 1px dashed var(--av-border);
        border-radius: var(--av-radius); }
    .main-blog .main-blog-left .shop-pagination {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px; }
      .main-blog .main-blog-left .shop-pagination > a, .main-blog .main-blog-left .shop-pagination > span {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        transition: transform var(--av-dur) var(--av-ease); }
      .main-blog .main-blog-left .shop-pagination > a:active {
        transform: scale(0.98); }
      .main-blog .main-blog-left .shop-pagination > a:focus-visible {
        outline: none;
        box-shadow: var(--av-ring); }
  @media (min-width: 992px) {
    .main-blog .main-blog-wrap--solo .main-blog-left-data {
      grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .main-blog .article-item .article-item-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--av-surface);
    border: 1px solid var(--av-border);
    border-radius: var(--av-radius);
    box-shadow: var(--av-shadow-sm);
    overflow: hidden;
    transition: transform var(--av-dur) var(--av-ease), box-shadow var(--av-dur) var(--av-ease); }
    .main-blog .article-item .article-item-wrap:hover, .main-blog .article-item .article-item-wrap:focus-within {
      transform: translateY(-4px);
      box-shadow: var(--av-shadow); }
    .main-blog .article-item .article-item-wrap .article-item-image {
      position: relative;
      display: block;
      aspect-ratio: 3 / 2;
      border-radius: 0;
      overflow: hidden;
      background: var(--av-surface-2); }
      .main-blog .article-item .article-item-wrap .article-item-image img {
        display: block;
        width: 100%;
        height: 100%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        transition: transform var(--av-dur-slow) var(--av-ease); }
      .main-blog .article-item .article-item-wrap .article-item-image .article-item-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: var(--av-primary);
        background: var(--av-primary-soft); }
      .main-blog .article-item .article-item-wrap .article-item-image .article-item-date {
        position: absolute;
        top: 12px;
        left: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 6px 10px;
        border-radius: var(--av-radius-sm);
        color: var(--av-on-gold);
        background: var(--av-gold);
        box-shadow: var(--av-shadow-sm);
        line-height: 1.1; }
        .main-blog .article-item .article-item-wrap .article-item-image .article-item-date .article-item-date-big {
          font-size: 1.25rem;
          font-weight: 800; }
        .main-blog .article-item .article-item-wrap .article-item-image .article-item-date .article-item-date-small {
          font-size: .75rem;
          font-style: normal;
          font-weight: 600; }
    .main-blog .article-item .article-item-wrap .article-item-detail {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 8px;
      margin: 0;
      padding: 16px 18px 12px; }
      .main-blog .article-item .article-item-wrap .article-item-detail .article-item-detail-title {
        margin: 0;
        line-height: 1.4; }
        .main-blog .article-item .article-item-wrap .article-item-detail .article-item-detail-title a {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          height: auto;
          font-size: 1.125rem;
          font-weight: 700;
          line-height: 1.4;
          color: var(--av-text);
          border-radius: 4px; }
          .main-blog .article-item .article-item-wrap .article-item-detail .article-item-detail-title a:focus-visible {
            outline: none;
            box-shadow: var(--av-ring); }
      .main-blog .article-item .article-item-wrap .article-item-detail .article-item-detail-info {
        font-size: .875rem;
        font-weight: 500;
        color: var(--av-text-muted); }
        .main-blog .article-item .article-item-wrap .article-item-detail .article-item-detail-info span {
          color: var(--av-text-muted) !important; }
      .main-blog .article-item .article-item-wrap .article-item-detail .article-item-detail-content {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: .9375rem;
        line-height: 1.55;
        color: var(--av-text-muted); }
      .main-blog .article-item .article-item-wrap .article-item-detail .article-item-detail-more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        margin-top: auto;
        font-weight: 700;
        color: var(--av-on-gold);
        border-radius: var(--av-radius-sm);
        transition: color var(--av-dur) var(--av-ease); }
        .main-blog .article-item .article-item-wrap .article-item-detail .article-item-detail-more:after {
          content: "";
          width: 14px;
          height: 14px;
          background: currentColor;
          -webkit-mask: var(--av-ico-arrow) center/contain no-repeat;
          mask: var(--av-ico-arrow) center/contain no-repeat;
          display: inline-block;
          transition: transform var(--av-dur) var(--av-ease); }
        .main-blog .article-item .article-item-wrap .article-item-detail .article-item-detail-more:hover {
          color: var(--av-primary-hover); }
          .main-blog .article-item .article-item-wrap .article-item-detail .article-item-detail-more:hover:after {
            transform: translateX(4px); }
        .main-blog .article-item .article-item-wrap .article-item-detail .article-item-detail-more:focus-visible {
          outline: none;
          box-shadow: var(--av-ring); }
  .main-blog .main-blog-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0; }
    .main-blog .main-blog-right .main-blog-right-newest,
    .main-blog .main-blog-right .main-blog-right-menu,
    .main-blog .main-blog-right .main-blog-right-banner {
      padding: 20px;
      background: var(--av-surface);
      border: 1px solid var(--av-border);
      border-radius: var(--av-radius);
      box-shadow: var(--av-shadow-sm);
      animation: mainBlogRise var(--av-dur-slow) var(--av-ease) both; }
    .main-blog .main-blog-right .section-title-all {
      margin-bottom: 14px; }
      .main-blog .main-blog-right .section-title-all > span {
        margin: 0;
        padding-left: 12px;
        font-size: 1.0625rem;
        font-weight: 800;
        line-height: 1.3;
        text-transform: none;
        color: var(--av-text);
        border-left: 4px solid var(--av-gold); }
    .main-blog .main-blog-right .main-blog-right-newest .article-item.layout-small {
      padding: 0; }
      .main-blog .main-blog-right .main-blog-right-newest .article-item.layout-small .article-item-wrap {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        height: auto;
        padding: 12px 0;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transform: none; }
        .main-blog .main-blog-right .main-blog-right-newest .article-item.layout-small .article-item-wrap .article-item-image {
          aspect-ratio: 1 / 1;
          border-radius: var(--av-radius-sm); }
          .main-blog .main-blog-right .main-blog-right-newest .article-item.layout-small .article-item-wrap .article-item-image img {
            aspect-ratio: 1 / 1;
            object-fit: cover; }
        .main-blog .main-blog-right .main-blog-right-newest .article-item.layout-small .article-item-wrap .article-item-detail {
          padding: 0;
          gap: 4px; }
          .main-blog .main-blog-right .main-blog-right-newest .article-item.layout-small .article-item-wrap .article-item-detail .article-item-detail-title a {
            font-size: .9375rem;
            -webkit-line-clamp: 2;
            height: auto; }
          .main-blog .main-blog-right .main-blog-right-newest .article-item.layout-small .article-item-wrap .article-item-detail .article-item-detail-date {
            font-size: .8125rem;
            color: var(--av-text-muted); }
      .main-blog .main-blog-right .main-blog-right-newest .article-item.layout-small + .article-item.layout-small .article-item-wrap {
        border-top: 1px dashed var(--av-border); }
    .main-blog .main-blog-right .main-blog-right-menu .main-blog-right-menu-data {
      margin: 0;
      padding: 0;
      list-style: none;
      background: transparent;
      cursor: default; }
      .main-blog .main-blog-right .main-blog-right-menu .main-blog-right-menu-data li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 44px;
        padding: 8px 12px;
        border-radius: var(--av-radius-sm);
        color: var(--av-text);
        transition: background var(--av-dur) var(--av-ease), color var(--av-dur) var(--av-ease); }
        .main-blog .main-blog-right .main-blog-right-menu .main-blog-right-menu-data li > a:hover {
          color: var(--av-primary);
          background: var(--av-primary-soft); }
        .main-blog .main-blog-right .main-blog-right-menu .main-blog-right-menu-data li > a:focus-visible {
          outline: none;
          box-shadow: var(--av-ring); }
        .main-blog .main-blog-right .main-blog-right-menu .main-blog-right-menu-data li > a.active span {
          transform: rotate(90deg); }
        .main-blog .main-blog-right .main-blog-right-menu .main-blog-right-menu-data li > a span {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          flex: none;
          width: 44px;
          height: 44px;
          margin: -8px -12px -8px 0;
          cursor: pointer;
          transition: transform var(--av-dur) var(--av-ease); }
          .main-blog .main-blog-right .main-blog-right-menu .main-blog-right-menu-data li > a span svg {
            width: 14px;
            height: 14px; }
      .main-blog .main-blog-right .main-blog-right-menu .main-blog-right-menu-data li.active > a {
        color: var(--av-primary);
        font-weight: 700; }
      .main-blog .main-blog-right .main-blog-right-menu .main-blog-right-menu-data .menu1, .main-blog .main-blog-right .main-blog-right-menu .main-blog-right-menu-data .menu2, .main-blog .main-blog-right .main-blog-right-menu .main-blog-right-menu-data .menu3 {
        display: none;
        margin: 0;
        padding: 0 0 0 14px;
        list-style: none; }
    .main-blog .main-blog-right .main-blog-right-banner a {
      display: block;
      overflow: hidden;
      border-radius: var(--av-radius-sm); }
    .main-blog .main-blog-right .main-blog-right-banner img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: var(--av-radius-sm);
      transition: transform var(--av-dur-slow) var(--av-ease); }
    .main-blog .main-blog-right .main-blog-right-banner a:hover img {
      transform: scale(1.03); }
    .main-blog .main-blog-right .main-blog-right-banner a:focus-visible {
      outline: none;
      box-shadow: var(--av-ring); }