@media (min-width: 998px){
  .section-feature-grid-banner .swiper-toggle-slide [onclick]{
    position: relative;
    cursor: pointer;
    margin-bottom: 2px;
    width: 100%;
    max-width: 500px;
    transition: all 200ms linear;
    padding: 15px 3px;
    opacity: 0.6;
  }
  .section-feature-grid-banner .swiper-toggle-slide [onclick]:hover{
    opacity: 1;
  }
  .section-feature-grid-banner .swiper-toggle-slide [onclick].is-active h6{
    color: var(--color-primary);
  }
  .section-feature-grid-banner .swiper-toggle-slide [onclick]::before{
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -3px;
    height: 3px;
    background: var(--color-primary);
    opacity: 0;
    border-radius: 3px;
  }
  .section-feature-grid-banner .swiper-toggle-slide [onclick].is-active,
  .section-feature-grid-banner .swiper-toggle-slide [onclick].is-active::before{
    opacity: 1;
  }
}
.section-feature-grid-banner .swiper-toggle-slide [onclick] #animated-path{
  transition: all 80ms linear;
  transform-origin: center;
}

.section-feature-grid-banner .swiper-toggle-slide [onclick].is-active .icon-bullet-plus{
  transform: rotate(45deg);
}

.section-feature-grid-banner .swiper-toggle-slide [onclick].is-active #animated-path.v-path{
  transform: rotate(45deg);
}
.section-feature-grid-banner .swiper-toggle-slide [onclick].is-active #animated-path.h-path{
  transform: rotate(-45deg);
}

@media (max-width: 997px){
  .section-feature-grid-banner .swiper-toggle-slide [onclick]{
    position: relative;
    cursor: pointer;
    margin-bottom: 2px;
    width: 100%;
    max-width: 500px;
    transition: all 200ms linear;
    padding: 8px 3px;
  }
  .section-feature-grid-banner .swiper-toggle-slide [onclick].is-active{
    padding: 8px 3px 16px;
  }
  .section-feature-grid-banner .swiper-toggle-slide [onclick].is-active::before{
    content: '';
    position: absolute;
    top: -3px;
    left: -10px;
    right: -10px;
    bottom: -0px;
    background: currentColor;
    opacity: 0.12;
    border-radius: 10px;
  }
  .section-feature-grid-banner.section-bg-white .swiper-toggle-slide [onclick].is-active::before,
  .section-feature-grid-banner.section-bg-gray .swiper-toggle-slide [onclick].is-active::before{
    background: var(--color-primary);
    opacity: 0.1;
  }
  .section-feature-grid-banner .swiper-toggle-slide [onclick]:not(.is-active) .desc{
    display: none;
  }
}

.section-feature-grid-banner .swiper-toggle-slide .is-active h6 svg{
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.section-feature-grid-banner .section-container{
  grid-template-areas: 
      "content content"
      "points points"
      "graphic graphic";
}

.section-feature-grid-banner .content-container{
  grid-area: content;
}
.section-feature-grid-banner .points-container{
  grid-area: points;
}
.section-feature-grid-banner .graphic-container{
  grid-area: graphic;
}

@media (max-width: 997px){
  .section-feature-grid-banner .section-container,
  .section-feature-grid-banner .section-container.img-position_left{
    grid-template-areas: 
      "content"
      "points"
      "graphic";
  }
  .section-feature-grid-banner .section-container.sm-graphic_middle{
    grid-template-areas: 
      "content"
      "graphic"
      "points";
  }
}