%card-default-grid {
  width: calc(#{percentage(1 / 2)} - #{$margin-card-xs});

  @include breakpoint(xs) {
    &:nth-child(1):nth-last-child(1),
    &:nth-child(1):nth-last-child(2),
    &:nth-child(2):nth-last-child(1) {
      width: 100%;
    }

    h3 {
      @include multiline-ellipsis(2, 20px, 1.2, 0);
    }

    .body-text {
      @include multiline-ellipsis(2, 18px, 1.3, 0);
    }

    &.content-navigation-card {
      h3 {
        @include font-size(16);
      }
    }
  }

  @include breakpoint(sm) {
    width: calc(#{percentage(1 / 2)} - #{$margin-card});
  }

  @include breakpoint(md) {
    width: calc(#{percentage(1 / 3)} - #{$margin-card});
  }
}

%card-sext-grid {
  width: calc(#{percentage(1 / 2)} - #{$margin-card-xs});

  @include breakpoint(sm) {
    width: calc(#{percentage(1 / 4)} - #{$margin-card});
  }

  @include breakpoint(md) {
    width: calc(#{percentage(1 / 6)} - #{$margin-card});
  }
}

%card-quad-grid {
  width: calc(#{percentage(1 / 2)} - #{$margin-card-xs});

  @include breakpoint(sm) {
    width: calc(#{percentage(1 / 3)} - #{$margin-card});
  }

  @include breakpoint(md) {
    width: calc(#{percentage(1 / 4)} - #{$margin-card});
  }
}

%card-half-mobile {
  width: calc(#{percentage(1 / 2)} - #{$margin-card-xs});
}

%nicer-card-grid {
  @include breakpoint(md) {
    &:nth-child(1):nth-last-child(2),
    &:nth-child(2):nth-last-child(1),
    &:nth-child(1):nth-last-child(5),
    &:nth-child(2):nth-last-child(4),
    &:nth-child(1):nth-last-child(4),
    &:nth-child(2):nth-last-child(3),
    &:nth-child(3):nth-last-child(2),
    &:nth-child(4):nth-last-child(1) {
      width: calc(#{percentage(1 / 2)} - #{$margin-card});

      .card-text {
        display: flex;
        flex-direction: row;
        padding: 0;
      }

      .info-block {
        padding: $margin-enterprise;
        display: block;
      }

      .offer-block {
        padding: $margin-enterprise;
        text-align: right;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 0;
        max-width: 25%;
      }

      .price-text {
        display: inline-block;
        min-width: 20%;
      }
    }
  }

  [class^='ratio-'],
  [class*=' ratio-'] {
    z-index: 1;

    img {
      width: 100%;
    }
  }
}

.quad-grid {
  .tui-card {
    @extend %card-quad-grid;

    @include breakpoint(md) {
      &:nth-child(1):nth-last-child(1),
      &:nth-child(1):nth-last-child(2),
      &:nth-child(2):nth-last-child(1) {
        width: calc(#{percentage(1 / 2)} - #{$margin-card});
      }
    }

    @include breakpoint(xs) {
      &:nth-child(1):nth-last-child(1),
      &:nth-child(1):nth-last-child(2),
      &:nth-child(2):nth-last-child(1) {
        width: 100%;
      }

      h3 {
        @include multiline-ellipsis(2, 20px, 1.2, 0);
      }

      .body-text {
        @include multiline-ellipsis(2, 18px, 1.3, 0);
      }

      &.content-navigation-card {
        /* stylelint-disable max-nesting-depth */
        h3 {
          @include font-size(16);
        }
        /* stylelint-enable */
      }
    }
  }
}

%one-column-wide {
  .content-cards-list:not(.quad-grid):not(.musement) & {
    &:nth-child(1):nth-last-child(1) {
      @include breakpoint(sm) {
        width: 100%;
        flex-direction: row;
        align-items: stretch;

        /* stylelint-disable max-nesting-depth */
        .media-container {
          width: calc(#{percentage(2 / 3)} - #{$margin-normal});
          min-height: 100%;
          margin-right: 0;
          border-radius: $border-radius-normal 0 0 $border-radius-normal;
        }

        .media {
          border-radius: inherit;
        }

        .card-text {
          width: calc(#{percentage(1 / 3)} + #{$margin-normal});
          margin: 0;
          flex-grow: 1;
          border-radius: 0 $border-radius-normal $border-radius-normal 0;
        }

        .offer-icon {
          right: calc(#{percentage(1 / 3)} + #{$margin-normal});
        }
      }

      @include breakpoint(lg) {
        h3 {
          @include font-size(40);
          margin-bottom: $margin-normal;
          line-height: 1;
        }
      }
      /* stylelint-enable */
    }
  }
}

%focus-cards {
  &[class^='focus-']:nth-child(n),
  &[class*=' focus-']:nth-child(n) {
    @include breakpoint(md) {
      overflow: hidden;
      display: block;

      .content-navigation-card:nth-child(n) {
        width: calc(#{percentage(1 / 3)} - #{$margin-card});
        float: left;
        /* stylelint-disable max-nesting-depth */
        &:nth-child(1):nth-last-child(5) {
          .ratio-16-9:after {
            padding-bottom: calc((56.25% * 2) + #{$margin-card});
          }

          img {
            height: 100%;
            width: auto;
          }
        }

        &:nth-child(1):nth-last-child(3) {
          width: calc(#{percentage(2 / 3)} - #{$margin-card});

          .ratio-16-9:after {
            padding-bottom: calc(56.25% + #{$margin-card / 2});
          }

          img {
            height: 100%;
            width: auto;
          }
        }
        /* stylelint-enable */
      }

      &.focus-right {
        /* stylelint-disable max-nesting-depth */
        .content-navigation-card {
          &:nth-child(1):nth-last-child(5) {
            float: right;
          }

          &:nth-child(1):nth-last-child(3) {
            float: right;
          }
        }
        /* stylelint-enable */
      }
    }
  }

  + .btn {
    position: relative;
    top: -$margin-double;
  }
}