@use "variables";

.fwe-card {
  display: flex;
  flex-direction: column;
  border: 1px solid variables.$border;
  background-color: variables.$white;
  border-radius: variables.$border-radius-m;

  .fwe-card-img {
    width: 100%;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  .fwe-card-img-169 {
    @extend .fwe-card-img;
    height: 188px;
    max-height: 188px;
    object-fit: cover;
    object-position: center center;
  }

  .fwe-card-img-32 {
    @extend .fwe-card-img;
    height: 284px;
    max-height: 284px;
    object-fit: cover;
    object-position: center center;
  }

  .fwe-card-header {
    padding: 24px;
    padding-bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;

    .fwe-card-title {
      h5 {
        line-height: variables.$font-size-xl;
        font-size: variables.$font-size-xl;
        margin: 0;
        padding: 0;
      }

      p {
        padding: 0;
        margin: 0;
        color: variables.$text-light;
        font-size: variables.$font-size-md;
      }
    }
  }

  .fwe-card-body {
    flex-grow: 1;
    padding: 24px;
    padding-bottom: 48px;

    .fwe-card-text {
      margin: 0;
      padding: 0;
    }

    > *:not(:last-child) {
      margin-bottom: 24px;
    }
  }

  .fwe-card-notification {
    height: 64px;
    min-height: 64px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;

    .fwe-card-title {
      padding-left: 16px;

      h6 {
        line-height: variables.$font-size-base;
        font-size: variables.$font-size-base;
        font-weight: variables.$font-weight-bold;
        margin: 0;
        padding: 0;
      }

      p {
        padding: 0;
        margin: 0;
        color: variables.$text;
      }
    }
  }
}