@font-face {
  font-family: "Lato";
  src: url("../../Lato-Regular.ttf") format("truetype");
}

body {
  font-family: "Lato";
}

.iskeleton {
  opacity: 0.7;
  animation: skeleton-loading 1s linear infinite alternate;
}

.iskeleton-text {
  width: 100%;
  height: 0.5rem;
  margin-bottom: 0.25rem;
  border-radius: 0.125rem;
}

.iskeleton-text:last-child {
  margin-bottom: 0;
  width: 80%;
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 70%);
  }

  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

.grid {
  margin-top: 13vh;
  margin-left: 3vh;
  margin-right: 3vh;
  margin-bottom: 3vh;
  padding: 1rem;
  /* display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding: 1rem;
  margin-right: 2vh;
  margin-left: 2vh; */
  /**
   * User input values.
   */

  /* justify-items: center; */
  --grid-layout-gap: 1rem;
  --grid-column-count: 3;
  --grid-item--min-width: 300px;

  /**
    * Calculated values.
    */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc(
    (100% - var(--total-gap-width)) / var(--grid-column-count)
  );

  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr)
  );
  grid-gap: var(--grid-layout-gap);
}

.icard {
  max-width: 95%;
  background-color: #2a2e35;
  color: #b2becd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.38);
  padding: 16px;
  border-radius: 4px;
  font-size: 1.1rem;
  text-transform: capitalize;
}

.header {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.header-img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 100%;
  margin-right: 1rem;
  flex-shrink: 0;
}

.ititle {
  font-weight: bold;
  font-size: 1.25rem;
  text-transform: uppercase;
  word-wrap: none;
  /* white-space: nowrap; */
  text-overflow: ellipsis;
  overflow: hidden;
  flex-grow: 1;
}