flynt-component[name='ListComponents'] {
  .components {
    --grid-columns: 1;
    display: grid;
    gap: var(--flow-space);
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    justify-content: center;
    list-style: none;
    padding: 0;

    @media (min-width: $breakpoint-tablet) {
      --grid-columns: 2;
    }

    @media (min-width: $breakpoint-tablet-horizontal) {
      --grid-columns: 3;
    }
  }

  .component {
    display: flex;
    flex-wrap: wrap;

    .imageWrapper {
      block-size: 0;
      inline-size: 100%;
      overflow: hidden;
      padding-block-end: calc(100% * (800 / 1280));
      position: relative;

      .image {
        block-size: auto;
        position: absolute;

        &--isSmallerThanWrapper {
          block-size: 100%;
          object-fit: contain;
        }
      }
    }

    .componentLink {
      display: block;
      font-weight: initial;
      inline-size: 100%;
      text-decoration: none;
    }

    .content {
      color: var(--color-text);
    }

    footer {
      align-items: center;
      align-self: flex-end;
      display: flex;
      inline-size: 100%;
      justify-content: space-between;
      padding-block: 0 var(--box-spacing);
      padding-inline: var(--box-spacing);

      .button--text {
        margin-inline-start: auto;
      }
    }
  }
}
