.box-service-items
{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--m16);
}

@media (min-width: 650px)
{
  .box-service-items
  {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--m16);
    
  }
}

/*##########################################*/

.service-item-box
{
    width: 100%;
    display: flex;
    justify-content: center;
}

/*##########################################*/

.service-item {
    text-decoration: none;
    align-self: center;
    max-width: 200px;
    padding: var(--m16);
    padding-bottom: var(--m32);
    border-radius: var(--item-border-radius);

    display: flex;
    flex-direction: column;
    gap: var(--m16);
}

@media (min-width: 400px)
{
  .service-item {
    max-width: 300px;
  }
}

@media (min-width: 650px)
{
  .service-item {
    width: 100%;
  }
}

.service-item-anim
{
  background-color: var(--dark-bg);
  
  box-shadow: var(--item-shadow);
  transform: scale(90%);
  transition: 
      background-color 500ms ease,
      box-shadow 500ms ease,
      transform 500ms ease
  ;
}

.service-item-anim-active,
.service-item-anim:hover {
  background-color: var(--dark-bg);
  box-shadow: var(--item-shadow-hov);
  transform: scale(100%);
}

/*##########################################*/

.service-title {
    height: 64px;
    width: 100%;
    text-align: center;
    color: var(--txt-light-0);
    font-size: clamp(0.9rem, 0.7333rem + 1.0667vw, 1rem);
}

@media (min-width: 400px)
{
  .service-title {
    font-size: clamp(1.1rem, 0.78rem + 1.28vw, 1.3rem);
    width: 100%;
  }
}

@media (min-width: 650px)
{
  .service-title {
    font-size: 1rem;
    width: 100%;
  }
}

.service-item-anim > .service-title, 
.service-item-anim-active > .service-title {
  opacity: 0.5;
  transition: 
    opacity 1000ms ease,
    color 250ms ease
  ;
}

.service-item-anim-active > .service-title
{
  opacity: 1;
}

.service-item-anim:hover > .service-title
{
  color: var(--btn-bg-hov);
}
/*##########################################*/

.service-img {
  width: 50%;
  align-self: center;
}

.service-item-anim > .service-img
{
  opacity: 0.65;
  transform: scale(100%);

  transition: 
    opacity 800ms ease,
    transform 1000ms ease
  ;
}

.service-item-anim:hover > .service-img, 
.service-item-anim-active > .service-img {
  opacity: 1.0;
  transform: scale(120%);
}
/*##########################################*/

.service-item-anim:hover > .service-title {
  opacity: 1;
}
/*##########################################*/