@use 'colours';
@use 'responsive';

.card-wrapper {
  width: 100%;
  margin-bottom: 48px;
  @include responsive.not-desktop {
    margin-bottom: 30px;
  }
}

.card {
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);

  & > h6 {
    height: 60px;
    line-height: 60px;
    border: 1px solid colours.$colour-admiralty-blue;
    color: colours.$colour-white;
    background-color: colours.$colour-admiralty-blue;
    margin: 0;
    padding: 0 30px;
    @include responsive.not-desktop {
      padding: 0px 18px;
      height: 48px;
      line-height: 48px;
    }
  }

  & > div {
    border: 1px solid colours.$colour-line;
    border-top: none;
    flex-grow: 1;
    padding: 30px;
    @include responsive.not-desktop {
      padding: 24px 18px;
    }
  }
}

.text-input-form {
  .text-input-wrap {
    margin-bottom: 30px;
  }

  .text-input-wrap:last-child {
    margin-bottom: 0;
  }
}