
.columnItem {
  @include flex-align(flex-start, flex-start);
  gap: 1.6rem;
  font-size: 1.4rem;
  line-height: 2.2rem;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0px 4px 4px -2px rgba(27, 27, 28, 0.06), 0px 6px 8px -2px rgba(27, 27, 28, 0.08);    
  padding: 1.2rem;
  color: #515156;
  
  @include min(tablet) {
    gap: 2.4rem;
    font-size: 1.6rem;
    line-height: 2.6rem;
  }

  a {
    color: #165af8;
    font-weight: 500;
    text-decoration: underline;
  }

  > span {
    flex: 1;
    min-width: 9.6rem;
    color: #1b1b1c;
    font-weight: 600;

    &:nth-of-type(2) {
      flex: 3;
      font-weight: 400;
    }

    > button,
    > div {
      color: #3c3c40;
      font-size: 1.4rem;
      line-height: 2.2rem;
      font-weight: 600;
      cursor: pointer;

      &:hover,
      &:focus {
        text-decoration: underline;
      }

      @include min(tablet) {
        font-size: 1.6rem;
        line-height: 2.6rem;
      }
    }
  }
}


.gridItem {
  @include flex-align(center, space-between);  
  padding: 0.8rem;
  border-bottom: 1px solid var(--info-grid-mobile-border-color);

  span {
    font-size: 1.4rem;
    line-height: 2.2rem;
    font-weight: 700;
    color: var(--info-grid-title-color);

    &:nth-of-type(2) {
      font-weight: 400;
      color: var(--info-grid-text-color);

      @media only screen and (max-width: 767px) {
        padding-left: 3rem;
        text-align: right;
        word-break: break-word;
      }
    }

    > button,
    > div {
      text-decoration: underline;
      color: #165af8;
      font-size: 1.4rem;
      line-height: 2.2rem;
      cursor: pointer;
    }
  }

  a {
    text-decoration: underline;
    color: #165af8;
  }

  @include min(tablet) {
    border-width: 1px 1px 1px 0;
    border-style: solid;
    border-color: var(--info-grid-desktop-border-color);
    padding: 1.6rem 1.6rem 1.3rem 2.2rem;
    border-radius: 0 1.2rem 1.2rem 0;
    background-color: var(--info-grid-background-color);
    min-height: 12rem;
    position: relative;
    @include flex-direction(column);
    @include flex-align(flex-start, flex-start); 
    gap: 0.9rem;

    &:before {
      content: '';
      display: block;
      position: absolute;
      width: 0.6rem;
      height: 100%;
      top: 0;
      bottom: 0;
      left: 0;
      background: var(--info-grid-border-left-color);
    }

    span {
      &:first-of-type {
        font-size: 1.8rem;
        line-height: 1.8rem;
      }

      &:nth-of-type(2) {
        font-size: 1.6rem;
        line-height: 2.7rem;
        
      }

      > button,
      > div {
        font-size: 1.6rem;
        line-height: 2.7rem;
      }
    }
  }
}