.tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--secondary-border);
  border-radius: var(--border-radius);
  background-color: var(--secondary-background);

  .image {
    width: var(--tile-size-active);
    height: var(--tile-size-active);

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .body {
    padding: 1rem;
    color: var(--muted-color);

    .title {
      color: var(--color);
      font-weight: 700;
    }
  }
}

.tiles {
  --tile-size-active: var(--tile-size);
  display: grid;
  gap: 15px;

  &:not(.scroll) {
    grid-template-columns: repeat(auto-fit, var(--tile-size-active));
    grid-auto-columns: minmax(var(--tile-size-active), auto);
  }

  &.scroll {
    grid-auto-flow: column;
    grid-auto-columns: var(--tile-size-active);
    overflow-x: auto;
  }

  &.two-rows { 
    .tile {
      flex-direction: row;
      align-items: center;

      .image {
        flex-shrink: 0;
      }
      .body {
        padding: .7rem;
      }
    }

    &.scroll {
      font-size: 0.85rem;
      grid-auto-flow: column;
      grid-template-rows: repeat(2, auto);
      grid-auto-columns: calc(var(--tile-size-active) + 175px);
    }
  }
}

@media (max-width: 850px) {
  .tiles {
    --tile-size-active: var(--tile-size-mobile);
    font-size: 0.65rem;
  }
}