@import "../../../scss/variables";
@import "../../../scss/typo.mixins";
@import "../../../scss/breakpoints.mixins";
@import "../../../scss/grid.mixins";
@import "./main-menu__sub-menu";

.main-menu__item__sub-menu__image {
  @extend %main-menu__sub-menu__child;

  display: flex;
  cursor: pointer;
  flex-direction: column;
}

.main-menu__item__sub-menu__image__img {
  width: 100%;
  margin-top: -20px;
}

.main-menu__item__sub-menu__image__content {
  display: block;
  padding: 10px 15px;
  color: $color-crimson;
  background: $color-wild-sand;

  .main-menu__item__sub-menu__image:hover & {
    background: $color-silver;
  }
}

.main-menu__item__sub-menu__image__content__title {
  @extend %typo-24;

  display: block;
}

.main-menu__item__sub-menu__image__content__text {
  @extend %typo-18;

  display: block;
}