.zodiac-icon {
    width: 90px;
    height: 90px;
    background: var(--horo-bg);

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
.zodiac-section {
    width: 28px;
    height: 28px;
    background: var(--horo-bg);

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.zodiac-icon1 {
  -webkit-mask-image: url("/server/pics/horo/1.png");
  mask-image: url("/server/pics/horo/1.png");
}
.zodiac-icon2 {
  -webkit-mask-image: url("/server/pics/horo/2.png");
  mask-image: url("/server/pics/horo/2.png");
}
.zodiac-icon3 {
  -webkit-mask-image: url("/server/pics/horo/3.png");
  mask-image: url("/server/pics/horo/3.png");
}
.zodiac-icon4 {
  -webkit-mask-image: url("/server/pics/horo/4.png");
  mask-image: url("/server/pics/horo/4.png");
}
.zodiac-icon5 {
  -webkit-mask-image: url("/server/pics/horo/5.png");
  mask-image: url("/server/pics/horo/5.png");
}
.zodiac-icon6 {
  -webkit-mask-image: url("/server/pics/horo/6.png");
  mask-image: url("/server/pics/horo/6.png");
}
.zodiac-icon7 {
  -webkit-mask-image: url("/server/pics/horo/7.png");
  mask-image: url("/server/pics/horo/7.png");
}
.zodiac-icon8 {
  -webkit-mask-image: url("/server/pics/horo/8.png");
  mask-image: url("/server/pics/horo/8.png");
}
.zodiac-icon9 {
  -webkit-mask-image: url("/server/pics/horo/9.png");
  mask-image: url("/server/pics/horo/9.png");
}
.zodiac-icon10 {
  -webkit-mask-image: url("/server/pics/horo/10.png");
  mask-image: url("/server/pics/horo/10.png");
}
.zodiac-icon11 {
  -webkit-mask-image: url("/server/pics/horo/11.png");
  mask-image: url("/server/pics/horo/11.png");
}
.zodiac-icon12 {
  -webkit-mask-image: url("/server/pics/horo/12.png");
  mask-image: url("/server/pics/horo/12.png");
}

.zodiac-section-main {
  -webkit-mask-image: url("/server/pics/horo/main.png");
  mask-image: url("/server/pics/horo/main.png");
}
.zodiac-section-love {
  -webkit-mask-image: url("/server/pics/horo/love.png");
  mask-image: url("/server/pics/horo/love.png");
}
.zodiac-section-sx {
  -webkit-mask-image: url("/server/pics/horo/sx.png");
  mask-image: url("/server/pics/horo/sx.png");
}
.zodiac-section-money {
  -webkit-mask-image: url("/server/pics/horo/money.png");
  mask-image: url("/server/pics/horo/money.png");
}
.zodiac-section-health {
  -webkit-mask-image: url("/server/pics/horo/health.png");
  mask-image: url("/server/pics/horo/health.png");
}
.zodiac-section-match {
  -webkit-mask-image: url("/server/pics/horo/match.png");
  mask-image: url("/server/pics/horo/match.png");
}

#zodiac-icons {
  /*display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;*/
  display: grid;
  place-items: center;
  align-items: center;
  justify-items: center;
  padding-top: 20px;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.zodiac-item {
  display: flex;
  padding: 10px;
  gap: 10px;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
  border: 1px var(--item-border-color) solid;
  font-weight: 600;
  color: var(--item-link-color);
  background: var(--item-bg);
  transition: 250ms;
  width: 160px;

  &:hover {
    color: var(--item-link-color-hover);
	background: var(--item-bg-hover);
  }
  &:focus {
    color: var(--item-link-color-hover);
	background: var(--item-bg-hover);
  }
}


.horo_sub_menu {
  display: flex;
  flex-direction: row;
  gap: 30px;
  width: 100%;
  margin-top: 40px;
}
.horo_sub_menu_data {
  display: flex;
  flex-direction: column; 
  gap: 10px;
  width: 60%;
}
.horo_sub_menu_links {
  display: flex;
  flex-direction: column; 
  gap: 10px;
  width: 40%;
  min-width: 320px;
}
.horo_sub_menu_links2 {
  display: flex;
  flex-direction: column; 
  gap: 10px;
  width: 100%;
  margin-top: 40px;
}

.zodiac-section-a {
  display: flex;
  padding: 10px;
  gap: 10px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  border-radius: 8px;
  overflow: hidden;
  border: 1px var(--item-border-color) solid;
  font-weight: 600;
  color: var(--item-link-color);
  background: var(--item-bg);
  transition: 250ms;
  width: 100%;

  &:hover {
    color: var(--item-link-color-hover);
	background: var(--item-bg-hover);
  }
  &:focus {
    color: var(--item-link-color-hover);
	background: var(--item-bg-hover);
  }
}
.horo_sub_menu_data {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.buttons_horo {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  max-width: 100%;
  overflow-x: auto;
}
.buttons_horo::-webkit-scrollbar {
  display: none;
}
.horo_xbutton {
  display: flex;
  justify-content: center;
}
.linkto_horo {
  border-top: 3px var(--footer-border-color) dotted;
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 4px;
  justify-content: flex-start;
  align-items: center;
  padding-top: 10px;
}
.horo_article {
  display: flex;
  flex-direction: column;
  gap:10px;
} 
.horo_article.hide {
  display: none;
} 

@media screen and (min-width: 676px) and (max-width: 1180px) { /*Mobile devices*/
#zodiac-icons {
 
  grid-template-columns: repeat(4, 1fr);
  
}
.horo_sub_menu {
  flex-direction: column;
}
.horo_sub_menu_data {
  width: 100%;
}
.horo_sub_menu_links {
  width: 100%;
}
}

@media screen and (min-width: 1px) and (max-width: 675px) { /*Mobile devices*/
#zodiac-icons {
 
  grid-template-columns: repeat(2, 1fr);
}
.horo_sub_menu {
  flex-direction: column;
}
.horo_sub_menu_data {
  width: 100%;
}
.horo_sub_menu_links {
  width: 100%;
}
.small_mob {
  font-size: 0.8rem;

}

}