%panel {
  @extend %section-type;

  %panel__block {
    @extend %m_border;
    @include set-col(s,4);

    transition: transform .2s ease;

    &:focus,
    &:hover {
      transform: translateY(-10px);
    }
  }

  %panel__image {
    position     : relative;
    height       : 200px;
    border-bottom: 3px solid $black;
  }

  %panel__content {
    & > * {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
    align-items    : flex-start;
    padding        : 30px;
    @include media-min(xl) {
      padding: 25px 30px 50px;
    }

    & strong {
      position: relative;

      &:after {
        content : '';
        position: absolute;
        top     : 1px;
        right   : -7px;
        @include triangle(right, $black, 3px, 3px);
      }
    }
  }
}

.m_panel {
  @extend %panel;

  &__block {
    @extend %panel__block;
  }

  &__image {
    @extend %panel__image;
  }

  &__content {
    @extend %panel__content;
  }

  &__date {
    position  : absolute;
    top       : 20px;
    left      : 20px;
    @extend %m_border;

    background: $white;

    padding   : 10px 15px;
    text-align: center;

    .day {
      display    : block;

      @include rem-size(40);
      font-weight: 300;
    }

  }
  &__center{
    padding-left: 0;
    list-style  : none;
    @include set-wCol(8);
    margin      : 0 auto;
  }

  &__center--small{
    padding-left: 0;
    list-style  : none;
    @include set-wCol(4);
    margin      : 0 auto;
  }
}