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

.features-section
  padding: 6rem
  max-width: 1200px
  margin: 0 auto
  display: flex
  flex-direction: column
  gap: 8rem

.feature-block
  display: grid
  grid-template-columns: 1fr 1.3fr
  gap: 4rem
  align-items: center

.feature-block.feature-reverse
  grid-template-columns: 1.3fr 1fr

  .feature-content
    order: 2

  .feature-image
    order: 1

.feature-content
  display: flex
  flex-direction: column
  gap: 1rem

.feature-label
  font-size: 0.8125rem
  font-weight: 600
  color: $primary
  text-transform: uppercase
  letter-spacing: 0.08em

.feature-content h3
  font-size: 2rem
  font-weight: 700
  line-height: 1.2

.feature-content p
  font-size: 1.0625rem
  line-height: 1.7
  color: $text-secondary

.feature-image
  position: relative

  img
    width: 100%
    border-radius: 12px
    border: 1px solid $border-color

@media (max-width: 900px)
  .features-section
    padding: 4rem 2rem
    gap: 5rem

  .feature-block,
  .feature-block.feature-reverse
    grid-template-columns: 1fr
    gap: 2rem

    .feature-content,
    .feature-image
      order: unset

  .feature-content h3
    font-size: 1.75rem

@media (max-width: 640px)
  .features-section
    padding: 3rem 1.5rem
    gap: 4rem

  .feature-content h3
    font-size: 1.5rem

  .feature-content p
    font-size: 1rem