/**
 * Branding Page
 * Projects and design concepts listing
 */

.container--branding {
    padding-top: 80px;
    padding-bottom: 80px;
}

.branding {
    width: 100%;
    grid-column: 1 / -1;
}

.branding__title {
    margin: 0 0 24px 0;
    font-family: var(--font-display);
    font-size: var(--font-size-display-2-desktop);
    font-weight: 400;
    line-height: var(--line-height-display-2-desktop);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--color-content);
    text-align: center;
}

.branding__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
}

.branding__item {
    /* Базовый класс - будет переопределен модификаторами */
}

.branding__item--row1 {
    /* Первые 4 карточки: по 6 колонок (2 в ряд) */
    grid-column: span 6;
}

.branding__item--row2 {
    /* Первые 4 карточки: по 6 колонок (2 в ряд) */
    grid-column: span 6;
}

.branding__item--row3 {
    /* Следующие 3 карточки: по 4 колонки (3 в ряд) */
    grid-column: span 4;
}

.branding__item--row4 {
    /* Оставшиеся 6 карточек: по 2 колонки (6 в ряд) */
    grid-column: span 2;
}

.branding__item--row4 .project-card__image {
    /* Высота уменьшена вдвое для элементов в 6 в ряд */
    height: 220px; /* 439px / 2 = 219.5px, округлено до 220px */
}

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container--branding {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .branding__title {
        font-size: var(--font-size-display-2-desktop);
        margin-bottom: 24px;
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .container--branding {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .branding__title {
        font-size: var(--font-size-display-2-mobile);
        line-height: var(--line-height-display-2-mobile);
        margin-bottom: 20px;
    }

    .branding__grid {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--grid-gap);
    }

    .branding__item {
        grid-column: span 6;
    }

    .branding__item--mobile-full {
        grid-column: span 6;
    }

    .branding__item--mobile-half {
        grid-column: span 3;
    }

    .branding__item--row4 .project-card__image {
        /* Высота уменьшена вдвое для мобильной версии */
        height: 110px; /* 220px / 2 = 110px */
    }
}