@import 'src/styles/variables';

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}

.wrap {
  border-radius: $panel_radius;
  padding: $gap 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-auto-rows: auto;
  grid-column-gap: $gap;
  grid-row-gap: $gap;

  @include tablet {
    grid-template-columns: repeat(3, 1fr);
  }
}

.title {
  padding-left: 5px;

  a {
    text-decoration: none;
    color: inherit;
  }
}

.text {
  margin-left: $gap * 0.5;
}

.placeholder {
  .text {
    opacity: 1;
  }

  .grid {
    div {
      background: $placeholder_bg;
      animation: fade 0.5s infinite alternate;
    }
  }
}

.item {
  border-radius: $radius;
}