.container {
    max-width: 100%;
    padding: 0 12px;
    margin: 0 auto;
    box-sizing: border-box;
}

.modal .window {
    max-width: 480px;
    margin: 20px auto;
}

.burger-menu {
    max-width: 480px;
    left: calc(50% - 480px / 2)
}

header h1 {
    font-size: 64px;
}

header h1>span {
    font-size: 64px;
}

header .filters {
    justify-content: center;
    margin-top: 30px;
}

header .filters li:nth-child(1) {
    flex-basis: auto;
}

header .filters li:nth-child(2) {
    flex-basis: auto;
}

header .filters li:nth-child(3) {
    flex-basis: auto;
}

header .filters li:nth-child(4) {
    flex-basis: auto;
}

header .filters li:nth-child(5) {
    flex-basis: auto;
}

header .buttons>button {
    width: auto;
}

/* Footer */
footer>.container>.footer-item .button,
footer>.container>.footer-item>form input {
    width: calc(100% - 20px);
}

footer>.container>.footer-item>form>.headline>.icon {
    transform: rotateZ(0deg);
}

/* Items */
.item>.description:has(.show-more) {
    display: block;
}

.item>.description>.show-more {
    display: none;
}

/* Items */
.item {
    z-index: 1;
    gap: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-column-gap: var(--gap-common);
    grid-row-gap: var(--gap-common);
    padding: var(--gap-common);
    align-items: center;
}

.item>.badge {
    grid-column: 1 / 6;
    grid-row: 1 / 1;
}

.item>.info {
    grid-column: 1 / 6;
    grid-row: 1 / 2;
    margin: 0;
    gap: 0;
}

.item>.info:has(.logo>img) {
    gap: 12px;
}

.item>.info .tags,
.item>.params>.param .label {
    font-size: 16px;
}

.item .images {
    overflow: hidden;
    grid-column: 1 / 6;
    grid-row: 2 / 3;
    max-width: 100%;
    width: 100%;
    align-self: flex-start;
}

.item .images img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.item .params {
    gap: 0;
    grid-column: 1 / 6;
    grid-row: 4 / 5;
    margin: 0;
    flex-wrap: wrap;
    row-gap: var(--gap-common);
}

.item .params .param {
    flex-basis: 50%;
    flex-grow: 0;
    flex-shrink: 0;
    gap: 4px;
}

.item .description {
    grid-column: 1 / 6;
    grid-row: 3 / 4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

.item>.description:has(.show-more) {
    display: -webkit-box;
}

.item>.description>.show-more {
    display: none;
}

.item .business-plan {
    grid-column: 1 / 5;
    grid-row: 6 / 7;
    text-align: left;
    margin: 0;
}

.item .repost-like {
    grid-row: 6 / 7;
    grid-column: 5 / 6;
    margin: 0;
    justify-content: flex-start;
    margin: 0;
}

.item .buttons {
    grid-row: 5 / 6;
    grid-column: 1 / 6;
    margin: 0;
}

/* Cases */
.item-case {
    grid-template-rows: repeat(7, auto);
}

.item-case .headline {
    grid-row: 1 / 2;
    grid-column: 1 / 6;
    margin: 0;
}

.item-case .info {
    grid-row: 2 / 3;
    grid-column: 1 / 4;
}

.item-case>.name {
    margin: 0;
    grid-row: 2 / 3;
    grid-column: 4 / 6;
}

.item-case .images {
    grid-row: 3 / 4;
}

.item-case .description {
    grid-row: 5 / 6;
}

.item-case .params {
    grid-row: 4 / 5;
    column-gap: 8px;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.item-case .params .param {
    flex-basis: auto;
    flex-direction: row;
    gap: 8px;
}

.item-case>.params>.param .value {
    font-size: 1em;
}

.item-case .buttons {
    grid-row: 6 / 7;
}

.item-case .badge {
    top: -25px;
    right: -25px;
}

@media (min-width: 640px) {
    .item {
        grid-template-rows: repeat(5, auto);
    }

    .item .images {
        grid-row: 1 / 5;
        grid-column: 1 / 4;
    }

    .item>.info {
        grid-row: 1 / 2;
        grid-column: 4 / 6;
    }

    .item .description {
        grid-row: 6 / 7;
        grid-column: 1 / 6;
    }

    .item .params {
        grid-row: 5 / 6;
        grid-column: 1 / 6;
    }

    .item .params .param {
        flex-basis: 25%;
    }

    .item .business-plan {
        grid-row: 2 / 3;
        grid-column: 4 / 6;
    }

    .item .repost-like {
        grid-row: 3 / 4;
        grid-column: 4 / 6;
        justify-content: space-between;
    }

    .item .buttons {
        grid-row: 4 / 5;
        grid-column: 4 / 6;
    }

    .item>.badge {
        top: -25px;
        right: -25px;
    }

    .item-case .buttons {
        grid-row: 3 / 4;
        grid-column: 4 / 6;
    }

    .item-case .info {
        margin-top: var(--gap-common);
        grid-row: 2 / 3;
        grid-column: 3 / 6;
    }

    .item-case .name {
        grid-row: 3 / 4;
        grid-column: 3 / 4;
    }

    .item-case .headline {
        grid-row: 1 / 2;
        grid-column: 1 / 6;
        margin: 0;
    }

    .item-case .description {
        grid-row: 5 / 6;
    }

    .item-case .params {
        grid-row: 4 / 5;
        grid-column: 1 / 6;
    }

    .item-case .images {
        grid-row: 2 / 4;
        grid-column: 1 / 3;
    }

    .item-case .badge {
        top: -25px;
        right: -25px;
    }
}

@media (min-width: 800px) {

    .item .params .param {
        flex-basis: 25%;
        row-gap: 0;
    }

    .item-case {
        grid-template-rows: repeat(4, auto);
    }

    .item-case .params {
        grid-column: 1 / 5;
    }
}

@media (min-width: 1024px) {
    .item {
        grid-template-rows: repeat(5, auto);
    }

    .item .images {
        grid-row: 1 / 5;
        grid-column: 1 / 3;
    }

    .item>.info {
        grid-row: 1 / 2;
        grid-column: 3 / 6;
    }

    .item .business-plan {
        grid-row: 2 / 3;
        grid-column: 3 / 6;
    }

    .item .repost-like {
        grid-row: 4 / 5;
        grid-column: 3 / 4;
    }

    .item .buttons {
        grid-row: 4 / 5;
    }

    .item .description {
        grid-row: 5 / 6;
    }

    .item .params {
        grid-row: 3 / 4;
        grid-column: 3 / 6;
        column-gap: var(--gap-common);
    }

    .item .params .param {
        flex-basis: auto;
    }

    .item-case {
        grid-template-rows: repeat(5, auto);
    }

    .item-case .images {
        grid-column: 1 / 3;
        grid-row: 2 / 5;
    }

    .item-case .info {
        grid-row: 2 / 3;
    }

    .item-case .params {
        grid-row: 3 / 4;
    }

    .item-case .buttons {
        grid-row: 4 / 5;
    }

    .item-case .name {
        grid-row: 4 / 5;
    }

    .item-case .description {
        grid-row: 5 / 6;
    }
}

@media (min-width: 1140px) {
    body>.wrap {
        display: flex;
        flex-direction: column;
        height: 100vh;
        box-sizing: border-box;
    }

    .container {
        max-width: 1460px;
        padding: 0 16px;
    }

    #modal-burger-menu {
        display: none;
    }

    .burger {
        display: none;
    }

    nav ul {
        display: flex;
        flex-direction: row;
        gap: 16px;
        animation: none;
        position: relative;
        background: none;
        color: #ffffff;
        font-size: 16px;
        box-shadow: none;
        width: auto;
    }

    nav ul>li {
        margin: 10px 0;
    }

    nav ul>li>a {
        position: relative;
    }

    nav ul>li>a::after {
        content: ' ';
        position: absolute;
        width: 100%;
        top: 100%;
        left: 0;
        height: 1px;
        background-color: #fff;
        transition: all 100ms ease-out;
        transform: scaleX(0.0);
    }

    nav ul>li>a:hover::after {
        transform: scaleX(1.0);
    }

    nav .button {
        font-size: 14px;
        order: 3;
        padding: 10px 15px;
        margin: 0;
    }

    nav .container {
        justify-content: space-between;
    }

    .desktop-only {
        display: block;
    }

    nav .desktop-only {
        display: flex;
    }

    .modal .window {
        max-width: 320px;
        margin: 20px auto;
    }

    header h1 {
        font-size: 100px;
    }

    header h1>span {
        font-size: 70px;
    }

    header .filters {
        justify-content: center;
        margin-top: 30px;
    }

    header .filters li:nth-child(1) {
        flex-basis: auto;
    }

    header .filters li:nth-child(2) {
        flex-basis: auto;
    }

    header .filters li:nth-child(3) {
        flex-basis: auto;
    }

    header .filters li:nth-child(4) {
        flex-basis: auto;
    }

    header .filters li:nth-child(5) {
        flex-basis: auto;
    }

    header .buttons>button {
        width: auto;
    }

    /* Footer */
    footer>.container>.footer-item .button,
    footer>.container>.footer-item>form input {
        width: calc(100% - 20px);
    }

    footer>.container>.footer-item>form>.headline>.icon {
        transform: rotateZ(0deg);
    }

    /* Main */
    main {
        position: relative;
    }

    main.basis-100 {
        flex-basis: 100%;
    }

    main.with-top::before {
        content: ' ';
        display: block;
        width: 100%;
        background-color: #0b1e30;
        height: 180px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    nav {
        padding: 38px 0;
    }

    nav .button {
        font-size: 15px;
        padding: 18px 35px;
    }

    nav .logo {
        font-size: 20px;
        height: 20px;
    }

    header h1 {
        font-size: 130px;
    }

    header h1>span {
        font-size: 84px;
    }

    header h1>span>span {
        display: inline-block;
        line-height: 25px;
        padding: 20px 15px 40px 15px;
    }

    input[type=radio] {
        cursor: pointer;
    }

    .modal .window {
        padding: 40px 50px;
        max-width: 512px;
        font-size: 16px;
    }

    .modal form {
        gap: 18px;
    }

    .modal .title {
        font-weight: 500;
        font-size: 30px;
        margin-bottom: 30px;
    }

    .modal .options {
        font-size: 16px;
    }

    .modal .button {
        font-size: 20px;
    }

    .modal input {
        font-size: 18px;
    }

    .modal .footer {
        font-size: 14px;
    }

    header .headline-cases {
        font-size: 120px;
    }

    header .headline-cases>span {
        font-size: 80px;
    }

    .header-cases {
        min-height: 296px;
    }

    .go-top {
        scale: 1.5;
        bottom: 40px;
        right: 40px;
    }

    /* Items */
    .item {
        grid-template-rows: repeat(4, auto);
    }

    .item .description {
        grid-row: 3 / 4;
        grid-column: 3 / 6;
    }

    .item .params {
        grid-row: 2 / 3;
        grid-column: 3 / 6;
    }

    .item .images {
        grid-row: 1 / 4;
    }

    .item .logo {
        font-size: 32px;
    }

    .item .logo img {
        width: 1em;
        height: 1em;
    }

    .item .business-plan {
        grid-row: 4 / 5;
        grid-column: 1 / 3;
    }

    .item .repost-like {
        grid-row: 4 / 5;
        grid-column: 3 / 4;
    }

    .item .buttons {
        grid-row: 4 / 5;
    }

    .item-case {
        grid-template-rows: repeat(4, auto);
    }

    .item-case .images {
        grid-row: 1 / 4;
    }

    .item-case .description {
        grid-row: 3 / 4;
        grid-column: 3 / 6;
    }

    .item-case .headline {
        grid-row: 1 / 2;
        grid-column: 3 / 5;
    }

    .item-case .name {
        grid-row: 1 / 2;
        grid-column: 5 / 6;
    }

    .item-case .info {
        margin: 0;
        grid-row: 4 / 5;
        grid-column: 1 / 4;
    }

    .item-case .params {
        grid-row: 2 / 3;
    }

    .item-case .buttons {
        grid-row: 4 / 5;
        grid-column: 4 / 6;
    }

    .item-case .badge {
        top: -20px;
        right: -20px;
    }
}

@media (min-width: 1360px) {
    .item {
        grid-template-rows: repeat(3, auto);
    }

    .item .images {
        grid-row: 1 / 4;
    }

    .item .business-plan {
        grid-column: 3 / 4;
        display: none;
    }

    .item .repost-like {
        grid-column: 4 / 5;
        display: none;
    }

    .item .description {
        grid-row: 2 / 3;
        grid-column: 3 / 6;
        -webkit-line-clamp: 6;
    }

    .item .params {
        grid-row: 3 / 4;
        grid-column: 3 / 5;
        column-gap: 12px;
        justify-content: flex-start;
    }

    .item .params .param {
        flex-basis: auto;
    }

    .item .buttons {
        grid-row: 3 / 4;
        grid-column: 5 / 6;
    }

    .item-case {
        grid-template-rows: repeat(4, auto);
    }

    .item-case .images {
        grid-row: 1 / 5;
    }

    .item-case .info {
        grid-row: 2 / 3;
        grid-column: 3 / 5;
    }

    .item-case .name {
        grid-row: 2 / 3;
        grid-column: 5 / 6;
    }

    .item-case .headline {
        grid-row: 1 / 2;
        grid-column: 3 / 6;
    }

    .item-case .description {
        grid-row: 3 / 4;
        grid-column: 3 / 6;
    }

    .item-case .params {
        grid-row: 4 / 5;
        grid-column: 3 / 5;
    }

    .item-case .buttons {
        grid-row: 4 / 5;
    }

    .item-case .badge {
        top: -25px;
        right: -25px;
    }
}