@use 'sass:map';
@use '@material/card/_index.scss' as card;
@use '@tutorbook/styles/config';
@use '@material/elevation';

.wrapper {
  max-width: config.$default-width;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.hero {
  padding: 60px 0;
}

.title {
  text-align: initial;
  max-width: 600px;
  padding-bottom: 40px;
}

.card {
  @include card.outline(map.get(config.$colors, 'accents-2'), 1px);
  @include elevation.elevation(0);
  transition: elevation.transition-value(),
    border elevation.$transition-duration elevation.$transition-timing-function;
  will-change: elevation.$property, border;
}

.card:hover {
  @include card.outline(map.get(config.$colors, 'background'), 1px);
  @include elevation.elevation(8);
}