@import '../../scss/mixin';

.textCardGroup {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: size(10);
  background: var(--llm-em-color-primary-white);
  padding: size(8) 0;
  margin: size(12) 0;

  &:before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    background: var(--llm-em-color-primary-white);
    width: 100vw;
    height: 100%;
  }

  &:after {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    width: 100%;
    height: size(8);
    background: var(--llm-em-color-primary-white);
    background: linear-gradient(180deg, rgba(230, 224, 215, 1) 0%, rgba(255, 255, 255, 1) 100%);
    z-index: 1;
  }

  @include bpd(sm) {
    grid-template-columns: 1fr;
  }

  @include bp(sm) {
    padding: size(15);

    &:after {
      height: size(15);
    }
  }
}
