.section--resources
  padding-top: 140px
  padding-bottom: 140px

  +media(l)
    padding-top: 56px
    padding-bottom: 68px

  +media(s)
    padding-top: 40px
    padding-bottom: 80px

.resources
  display: flex
  flex-direction: column
  align-items: center
  width: 100%
  text-align: center

.resources__title
  font-size: 84px
  line-height: 100px
  text-align: center
  letter-spacing: -0.03em

  +media(l)
    font-size: 60px
    line-height: 72px

  +media(s)
    display: none

.resources__grid
  display: grid
  grid-auto-flow: column
  grid-template-columns: repeat(3, 352px)
  grid-column-gap: 32px
  grid-row-gap: 50px
  justify-content: center
  margin: 40px auto 0
  width: 100%

  +media(l)
    grid-template-columns: repeat(3, 210px)
    grid-column-gap: 20px
    grid-row-gap: 30px
    margin: 32px auto 0

  +media(s)
    grid-auto-flow: row
    grid-template-columns: 1fr
    grid-row-gap: 24px
    margin: 0 auto

.resources__picture
  grid-column: 2 / 3
  grid-row: 1 / 3

  +media(s)
    grid-column: unset
    grid-row: unset

.resources__image
  max-height: 100%
  max-width: 100%
  border-radius: 8px
  object-fit: cover
  overflow: hidden

  +media(s)
    width: 100%
    max-height: 360px

.resources__item .text--gradient::before
  opacity: 0

@mixin resourcesItemHoverStyle
  background-color: $total-black
  border-color: $total-black

  .text--gradient
    color: $white

  .text--gradient::before
    opacity: 1

  .resources__icon
    color: $white

  .resources__description
    color: $white

.resources__item
  display: flex
  flex-direction: column
  align-items: center
  width: 100%
  height: 100%
  max-height: 272px
  padding: 56px 24px
  border-radius: 8px
  border: 1px solid transparentize($black, 0.9)
  background-color: $white
  transition: $all

  +media(l)
    max-height: 164px
    padding: 32px 16px

  +media(s)
    max-height: unset
    min-height: 208px
    padding: 40px 16px

.resources__item:hover
  @include resourcesItemHoverStyle

.resources__item:focus-visible
  @include resourcesItemHoverStyle

.resources__item:active
  @include resourcesItemHoverStyle
  opacity: 0.85

.resources__icon
  min-width: 32px
  max-width: 32px
  min-height: 32px
  max-height: 32px
  transition: $all

  +media(l)
    min-width: 20px
    max-width: 20px
    min-height: 20px
    max-height: 20px

  +media(s)
    min-width: 32px
    max-width: 32px
    min-height: 32px
    max-height: 32px

.resources__name
  margin-top: 32px
  font-size: 24px
  line-height: 38px

  +media(l)
    margin-top: 20px
    font-size: 18px
    line-height: 22px

  +media(s)
    margin-top: 24px
    font-size: 24px
    line-height: 38px

.resources__description
  margin-top: 16px
  font-size: 18px
  line-height: 26px
  color: $dark
  white-space: normal
  transition: $all

  +media(l)
    margin-top: 10px
    font-size: 14px
    line-height: 16px

  +media(s)
    margin-top: 8px
    font-size: 18px
    line-height: 26px