@use "@/common/styles/colors" as *

.feature-grid-section
  padding: 4rem 6rem 6rem
  max-width: 1200px
  margin: 0 auto

.feature-grid-header
  text-align: center
  margin-bottom: 3rem
  
  h2
    font-size: 2.25rem
    font-weight: 700
    color: $text
    margin-bottom: 0.75rem
    letter-spacing: -0.02em
    
  p
    font-size: 1.0625rem
    color: $text-secondary
    max-width: 500px
    margin: 0 auto

.feature-grid-label
  display: inline-block
  font-size: 0.8125rem
  font-weight: 600
  color: $primary
  text-transform: uppercase
  letter-spacing: 0.08em
  margin-bottom: 0.75rem

.feature-grid
  display: grid
  grid-template-columns: repeat(3, 1fr)
  gap: 1.25rem

.feature-card
  position: relative
  display: flex
  flex-direction: column
  gap: 1rem
  padding: 1.75rem
  background: $background-lighter
  border: 1px solid $border-color
  border-radius: 16px
  transition: all 0.3s ease
  overflow: hidden

  &:hover
    transform: translateY(-4px)
    border-color: $border-hover
    box-shadow: $shadow-md

.feature-card--blue
  .feature-icon
    background: rgba($blue, 0.1)
    svg
      color: $blue-light

.feature-card--purple
  .feature-icon
    background: rgba($purple, 0.1)
    svg
      color: lighten($purple, 10%)

.feature-card--orange
  .feature-icon
    background: rgba($orange, 0.1)
    svg
      color: lighten($orange, 10%)

.feature-card--green
  .feature-icon
    background: rgba($primary, 0.1)
    svg
      color: $primary-light

.feature-card--red
  .feature-icon
    background: rgba($red, 0.1)
    svg
      color: $red-light

.feature-card--cyan
  $cyan: #06b6d4
  $cyan-light: #22d3ee
  .feature-icon
    background: rgba($cyan, 0.1)
    svg
      color: $cyan-light

.feature-icon
  width: 3rem
  height: 3rem
  display: flex
  align-items: center
  justify-content: center
  border-radius: 12px
  transition: transform 0.3s ease

  svg
    font-size: 1.25rem
    transition: transform 0.3s ease

.feature-card:hover .feature-icon svg
  transform: scale(1.1)

.feature-text
  display: flex
  flex-direction: column
  gap: 0.5rem

.feature-card h3
  font-size: 1.0625rem
  font-weight: 600
  color: $text

.feature-card p
  font-size: 0.875rem
  color: $text-secondary
  line-height: 1.6

@media (max-width: 1100px)
  .feature-grid-section
    padding: 3rem 2rem 4rem

  .feature-grid
    grid-template-columns: repeat(2, 1fr)
    
  .feature-grid-header h2
    font-size: 1.875rem

@media (max-width: 640px)
  .feature-grid-section
    padding: 2rem 1.5rem 3rem

  .feature-grid
    grid-template-columns: 1fr
    gap: 1rem

  .feature-card
    padding: 1.5rem

  .feature-grid-header
    margin-bottom: 2rem
    
    h2
      font-size: 1.5rem
      
    p
      font-size: 1rem