@use "00-base/configure" as *;

.ma__card {
  background-color: $c-gray-light;  
  
  &__wrapper {
    color: $c-black;
    font-weight: normal;
    width: 100%;
    display: flex;
      flex-flow: column;

    @media ($bp-medium-min) {
      flex-flow: row;
    }
  }

  &--secondary {
    background-color: $c-gray-lightest;

    @media ($bp-small-min) {
      flex-flow: column;
      flex: 1 1 auto;
    }
  }

  &__content {
    flex: 1 1 auto;
    padding: 20px;

    @media ($bp-medium-min) {
      flex-basis: 40%;
    }

    &--secondary {
      flex-flow: row;
      flex: 1 1 auto;
    }
  }

  &__details {

    &--secondary {
      flex-flow: row;
      display: flex;

       @media ($bp-small-min) {
         flex-flow: column;
       }

       @media ($bp-large-min) {
         flex-flow: row;
       }

      .ma__card__thumbnail {
        flex-basis: 40%;
        padding-right: 20px;

        @media ($bp-small-max) {
          display: none;
          flex-basis: 0%;
        }
      }

      .ma__card__text {
        flex-basis: 60%;

        @media ($bp-small-max) {
          flex: 1 1 auto;
        }
      }
    }
  }

  &__title {
    text-decoration: none;
    font-weight: $fonts-bold;
    color: $c-font-link;

    span {
      border: 3px solid transparent;
      transition: border 0.4s ease;
      display: inline;

      &:hover {
        border-bottom-color: rgba($c-font-link,.5);
      }

      &:focus {
        border-bottom-color: rgba($c-font-link,.5) !important;
      }

      svg {
        display: inline-block;
        height: .6em;
        margin-right: -.8em;
        width: .6em;
        fill: rgba($c-font-link,.5);
      }
    }
  }

  &__img {
    flex: 1 1 auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    @media ($bp-medium-min) {
      flex-basis: 60%;

      @include ma-aspect-ratio(4,3);

      img {
        display: none;
      }
    }
    
    @media ($bp-medium-max) {

      img {
        display: block;
        width: 100%;
      }
    }

    &--secondary {

      @media ($bp-small-min) {
        display: none
      }
    }

  }

}