/* Home Block Three */
.home-block-three { padding: 5px 0 47px;}
.home-block-three__container {
  max-width: 1322px; margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
  display: grid; grid-template-columns: minmax(360px, 467px) 1fr; gap: 46px;
  align-items: center; /* vertically center left text to gallery height */
}
/* ensure left text block is centered even if container rule is overridden */
.home-block-three__text { align-self: center; margin-top: 30px}
.home-block-three__container > * { min-width: 0; }

/* Заголовок */
.home-block-three__title {
  margin: 0 0 16px;
  font-weight: 500; /* ближе к макету */
  font-size: 28px; line-height: 34px;
  color: #000;
}

/* Описание */
.home-block-three__desc {
  margin: 0 0 18px;
  font-weight: 400;
  font-size: 16px; line-height: 24px;
  color: #4C4C4C;
  max-width: 467px;
}

/* Список с кружками 1/2/3 */
.home-block-three__list { margin: 0 0 43px !important; padding: 0; list-style: none; }
.home-block-three__list-item { display: flex; align-items: flex-start; gap: 12px; margin: 15px 0; }
.home-block-three__bullet {
  width: 18px; height: 18px; min-width: 18px;
  border-radius: 50%; background: #EEFAFE;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 12px; line-height: 1; color: #06566C;
}
.home-block-three__list-text {
  font-weight: 400; font-size: 14px; line-height: 22px; color: #4C4C4C;
  display: block;
}

/* Кнопка */
.home-block-three__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 194px; height: 45px; border-radius: 8px;
  background: #EEFAFE; color: #06566C;
  font-weight: 500; font-size: 16px; text-decoration: none;
  transition: filter .2s ease;
}
.home-block-three__btn:hover { background: #E0F7FD; }
.home-block-three__btn:active { filter: brightness(0.94); }

/* Галерея */
.home-block-three__gallery {
  display: grid;
  grid-template-areas:
    "a b"
    "c b";
  grid-template-columns: 342px 427px;
  grid-auto-rows: 180px; /* two rows of 180 + 22 gap = 382 -> aligns with big card */
  gap: 22px;
  justify-content: start;
  justify-items: center;
  width: 100%;
  /* let the grid size naturally inside container to avoid overflow */
}

/* Карточки изображений */
.hb3-card { position: relative; border-radius: 10px; overflow: hidden; }
.hb3-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Бейджи 1/2/3 */
.hb3-card__badge {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.55); color:#fff;
  font-size: 13px; font-weight: 600; line-height: 22px; text-align: center;
}

/* Размеры (по макету) + сетка-слоты */
.hb3-card--big { width: 427px; aspect-ratio: 427 / 382; }
.hb3-card--small { width: 342px; aspect-ratio: 342 / 180; }

.hb3-card--slot-1 { grid-area: a; }
.hb3-card--slot-2 { grid-area: b; width: 427px; }
.hb3-card--slot-3 { grid-area: c; }

.home-block-three__btn-mobile {
  display: none;
}

@media (max-width: 1330px) {
  .home-block-three__container {
    grid-template-columns: minmax(320px, 42%) 1fr;
    gap: 18px;
  }
  .home-block-three__gallery {
    grid-template-columns: minmax(260px, 0.45fr) minmax(320px, 0.55fr);
    grid-auto-rows: auto;
    gap: 18px;
  }
  .home-block-three__gallery figure {
    margin: 0;
    padding: 0;
  }
  .hb3-card--big,
  .hb3-card--slot-2,
  .hb3-card--slot-1,
  .hb3-card--slot-3,
  .hb3-card--small {
    width: 100%;
  }
}

@media (max-width: 1075px) {
  .home-block-three__container {
    grid-template-columns: minmax(300px, 45%) 1fr;
    gap: 16px;
  }
  .home-block-three__gallery {
    grid-template-columns: minmax(230px, 0.46fr) minmax(260px, 0.54fr);
    grid-auto-rows: auto;
    gap: 16px;
    justify-items: center;
  }
  .home-block-three__gallery figure {
    margin: 0;
    padding: 0;
  }
  .hb3-card--big,
  .hb3-card--slot-2,
  .hb3-card--slot-1,
  .hb3-card--slot-3,
  .hb3-card--small {
    width: 100%;
  }
}

@media (max-width: 965px) and (min-width: 701px) {
  .home-block-three__gallery {
    grid-template-areas: "b";
    grid-template-columns: minmax(240px, 420px);
    justify-content: center;
    justify-items: center;
    gap: 14px;
  }
  .hb3-card--slot-1,
  .hb3-card--slot-3 {
    display: none;
  }
  .hb3-card--slot-2,
  .hb3-card--big {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 427 / 382;
  }
}

@media (max-width: 800px){
  .home-block-three__desc {
    max-width: 650px;
  }
  .home-block-three__container {
    grid-template-columns: 1fr;
    padding: 12px 0 0 0;
  }
  .home-block-three__btn {
    width: 100%;
  }
  .home-block-three__gallery {
    grid-template-areas:
      "a"
      "b"
      "c";
    grid-template-columns: 1fr;
    justify-content: center;
    justify-items: center;
    gap: 14px;
  }
  .hb3-card--slot-1,
  .hb3-card--slot-3 {
    display: block;
  }
  .hb3-card--slot-2,
  .hb3-card--big {
    width: 100% !important;
    max-width: 100%;
    aspect-ratio: 427 / 382;
  }
  .hb3-card--small {
    width: 100%;
    aspect-ratio: 342 / 180;
  }
}

@media (max-width: 700px) {
  .home-hero-cats {
    padding: 0;
  }
  .home-block-three { padding: 12px 0px 0px; }
  .home-block-three__container {
    padding: 0;
    gap: 14px;
  }
  .home-block-three__title {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 12px;
    font-weight: 700;
  }
  .home-block-three__desc {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 14px;
  }
  .home-block-three__list {
    margin-bottom: 12px !important;
  }
  .home-block-three__list-item {
    margin: 10px 0;
    gap: 10px;
  }
  .home-block-three__list-text {
    font-size: 15px;
    line-height: 22px;
  }
  .home-block-three__gallery {
    grid-template-areas:
      "a"
      "b"
      "c";
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px;
    justify-content: center;
    width: 100%;
  }
  .hb3-card--big,
  .hb3-card--slot-2,
  .hb3-card--slot-1,
  .hb3-card--small {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    display: block;
  }
  .home-block-three__btn-mobile {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 6px; width: 100%;
  }
  .home-block-three__btn-desktop {
    display: none;
  }

  .home-block-three__text { margin-top: 0px}
}


@media (min-width: 319px) and (max-width: 424px) {
  .home-block-three__title {
    font-size: 18px;
  }
  .home-block-three__desc {
      font-size: 14px;
  }
}