/*#region .home-slides */
.home-slides {
  display: grid;
  grid-template-columns:5fr 6fr;
  background-image: url('../images/background_01.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  padding:0 10% 0 0;
}

.home-slides > aside {
  mask-repeat: no-repeat;
  mask-image:  url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxMTg5IDEwMDAuMDQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDExODkgMTAwMC4wNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZD0iTTIyNy43NiwwYzU2LjYsMTUzLjg4LDEzNC40NCwyNjAsMzAyLjc2LDE5Mi4zYzE4Ni41Ny03NS4wNCwyOTQuODEtNzQuNzgsMzYwLjAyLDM3LjY1DQoJYzc5LjI1LDEzNi42MSw4Ny43MiwxMzIuMSwxODcuNTUsMTk0LjcxYzE5MC43NCwxMTkuNjEsMTI2LjQ3LDQzOC40OS0xMjMuOTgsNDM5Ljg4Yy0xNDEuMDksMC43OC0zOTcuMzEtMzYuMjktNTgzLjYsMzAuOTUNCglDMTg0LjksOTYyLjQ5LDExNiw5OTcuNTEsMCwxMDAwLjA0TDAsMEwyMjcuNzYsMHoiLz4NCjwvc3ZnPg0K");
}


.home-slides > aside > img{
  width: 100%;
}

.home-slides > section{
  display: grid;
  padding-top: 100px;
  grid-template-rows:auto 150px 100px;
}

.home-slides > section > h1{
  display: grid;
  font-size: 36px;
  gap: 20px;
  align-content: end;
}

.home-slides > section > h1 > span{
  font-size: 14px;
}

.home-slides > section > h1 > strong{
  color: var(--main-color);
}

.home-slides > section > div > ul{
  padding: 0;
  margin: 0;
}


.home-slides .swiper{
  width: 100%;
}

.home-slides > section > div > ul > li{
  display: grid;
  grid-template-columns: 100px 10px auto;
  gap: 10px;
}

.home-slides > section > div > ul > li > img {
  width: 100%;
}

.home-slides > section > div > ul > li > span {
  width: 1px;
  background-color: #88888833;
}

.home-slides > section > div > ul > li > div  {
  display: grid;
  align-content: start;
  gap: 5px;
}
.home-slides > section > div > ul > li > div >a {
  font-weight: bold;
  font-size: 18px;
  padding: 10px 0;
}

.home-slides > section > div > ul > li > div > p {
  color: #999;
  font-size: 14px;
}

.home-slides > section > a {
  justify-self: end;
}


.home-slides > section > a > img{
  height: 100%; 
  cursor: pointer;
  transition: all ease-in .3s .1s;
}


.home-slides > section > a:hover > img {
  transform: rotate(15deg);
}


/*#endregion */

/*#region responsive */
ul.site-links {
  display: grid;
  grid-template-columns: repeat(3 , 1fr);
  list-style-type: none;
  padding: 0;
  margin: 20px 15%;
}

ul.site-links > li {
  padding: 15px;
}


ul.site-links > li > a{
  display: grid;
  grid-template-rows : max-content auto;
  gap: 15px;
  justify-items: center;
  text-decoration: none;
}

ul.site-links > li > a > img{
  width: 100%;
  transition: all ease-in .3s .1s;
  mask-repeat: no-repeat;
  transform: scale(1.2);
}

ul.site-links > li.clinic > a > img {
  mask-image: url("../images/clinic-blob.svg");
}

ul.site-links > li.saloon > a >img {
  mask-image: url("../images/saloon-blob.svg");
}

ul.site-links > li.shop > a > img{
  mask-image: url("../images/shop-blob.svg");
}

ul.site-links > li.news > a > img{
  mask-image: url("../images/news-blob.svg");
}

ul.site-links > li.bill > a > img{
  mask-image: url("../images/bill-blob.svg");
}

ul.site-links > li.blog > a > img{
  mask-image: url("../images/blog-blob.svg");
}

ul.site-links > li > a:hover > img{
  mask: none;
  transform: scale(1);
  border-radius: 30% 10%;
}

ul.site-links > li > a > h3{
  font-size: 16px;
  color: #000;  
}


/*#endregion */

/*#region .site-address */

.site-address{
  display: grid;
  grid-template-columns: 2fr 5fr;
  margin: 0 10%;
  gap: 25px;
  align-items: center;
}

.site-address > aside {
  display: grid;
  grid-template-rows: 150px max-content max-content max-content;
  gap:15px;
  background-color: #f2f3f5;
  border-radius:50px;
  overflow:hidden;
  padding-bottom: 20px;
}

.site-address > aside > div.p-head{
  position: relative;
}

.site-address > aside > div.p-head:after{
  content: " --";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background-color: rgba(0,0,0,0.3);
}

.site-address > aside > div.p-head > h2{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 22px;
  text-align: center;
  left: 0px;
  right: 0px;
  z-index: 99;
}

.site-address > aside img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-address > aside > div.p-item{
  display: grid;
  grid-template-columns: max-content auto;
  gap: 15px;
  padding: 0 15px;
}

.site-address > aside > div.p-item > i{
  font-size: 32px;
  justify-content: center;
  color: var(--main-color);
}

 
.site-address > iframe {
  width: 100%;
  height: 85vh;
  border-radius: 30px;
  mask-size:  contain;
  mask-image: url("../images/img-map-cover.png");
  mask-repeat: no-repeat;
}

.site-address > aside > div.p-item > div > p{
  display: grid;
}

.site-address > aside > div.p-item > div > p > a{
  text-decoration: none;
  color: #000;
}

/*#endregion */

/*#region responsive */

/* Monitor */
@media (min-width: 768px) and (max-width: 992px) {
}

/* Tablet */
@media (min-width: 576px) and (max-width: 768px) {

}

/* Phone */
@media (max-width: 576px) {

}

/*#endregion */