@import '../breakpoint';
@import '../color';

.topic {
  padding: 30px 0;
  position: relative;
  display: grid;
  grid-template-columns: 256px min-content 1fr;

  h3.title {
    line-height: 1.67em;
  }

  .divider {
    width: 0;
    height: 100%;
    border-left: 2px $mid-blue solid;
    margin: 0 37px;
  }

  .title,
  .description {
    display: flex;
    align-items: center;
  }
}

@include md {
  .topic {
    grid-template-columns: 1fr;
    padding: 20px 0;

    h3.title {
      br[data-delimiter='：'] {
        display: none;
      }
    }

    .divider {
      width: 100%;
      height: 0;
      border-bottom: none;
      border-top: 2px $mid-blue solid;
      margin: 15px 0;
    }
  }
}