/*-----------------------------------*\
  #service.css
\*-----------------------------------*/

/**
 * TABLE OF CONTENT
 *
 * COMPONENTS
 * Card...........................Cards style
 * Btn............................Button style
 *
 * MAIN CONTENT
 * Service........................Service style
 * Media queries..................Responsive for all devices
 */





/*-----------------------------------*\
  #COMPONENTS
\*-----------------------------------*/

@import url('../components/card.css');
@import url('../components/btn.css');





/*-----------------------------------*\
  #SERVICES
\*-----------------------------------*/

.service {
  padding-block-start: calc(var(--section-padding) + 60px);
}

.service-list {
  display: grid;
  gap: 25px;
}

.card-title {
  margin-block-end: 10px;
}

.card ion-icon {
  font-size: 3.2rem;
}

.card .body-sm {
  color: var(--jet);
}





/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

/**
 * responsive for large than 768px screen
 */

@media (min-width: 768px) {

  .service-list {
    grid-template-columns: 1fr 1fr;
  }

}