.collection__cells {
    display: grid;
    margin-top: 40px;
    gap: 24px;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(3, 220px);
}

.cell {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    background-color: var(--gray);
    border-radius: 16px;
    padding: 32px;
    height: 100%;
}

.cell1 {
    box-shadow:
        7px 2px 17px 0px rgba(0, 0, 0, 0.1),
        30px 10px 31px 0px rgba(0, 0, 0, 0.09),
        67px 22px 42px 0px rgba(0, 0, 0, 0.05),
        119px 38px 50px 0px rgba(0, 0, 0, 0.01),
        187px 60px 55px 0px rgba(0, 0, 0, 0);
    grid-column: 1/4;
    grid-row: 1/2;
    border-radius: 16px;
}

.cell2 {
    box-shadow:
        7px 2px 17px 0px rgba(0, 0, 0, 0.1),
        30px 10px 31px 0px rgba(0, 0, 0, 0.09),
        67px 22px 42px 0px rgba(0, 0, 0, 0.05),
        119px 38px 50px 0px rgba(0, 0, 0, 0.01),
        187px 60px 55px 0px rgba(0, 0, 0, 0);
    grid-column: 4/7;
    grid-row: 1/2;
    border-radius: 16px;
}

.cell3 {
    grid-column: 7/9;
    grid-row: 1/3;
    border-radius: 16px;
    box-shadow:
        7px 2px 17px 0px rgba(0, 0, 0, 0.1),
        30px 10px 31px 0px rgba(0, 0, 0, 0.09),
        67px 22px 42px 0px rgba(0, 0, 0, 0.05),
        119px 38px 50px 0px rgba(0, 0, 0, 0.01),
        187px 60px 55px 0px rgba(0, 0, 0, 0);
}

.cell4 {
    grid-column: 1/4;
    grid-row: 2/4;
    border-radius: 16px;
    box-shadow:
        7px 2px 17px 0px rgba(0, 0, 0, 0.1),
        30px 10px 31px 0px rgba(0, 0, 0, 0.09),
        67px 22px 42px 0px rgba(0, 0, 0, 0.05),
        119px 38px 50px 0px rgba(0, 0, 0, 0.01),
        187px 60px 55px 0px rgba(0, 0, 0, 0);
}

.cell5 {
    grid-column: 4/7;
    grid-row: 2/3;
    border-radius: 16px;
    box-shadow:
        7px 2px 17px 0px rgba(0, 0, 0, 0.1),
        30px 10px 31px 0px rgba(0, 0, 0, 0.09),
        67px 22px 42px 0px rgba(0, 0, 0, 0.05),
        119px 38px 50px 0px rgba(0, 0, 0, 0.01),
        187px 60px 55px 0px rgba(0, 0, 0, 0);
}

.cell6 {
    grid-column: 4/9;
    grid-row: 3/4;
    border-radius: 16px;
    box-shadow:
        7px 2px 17px 0px rgba(0, 0, 0, 0.1),
        30px 10px 31px 0px rgba(0, 0, 0, 0.09),
        67px 22px 42px 0px rgba(0, 0, 0, 0.05),
        119px 38px 50px 0px rgba(0, 0, 0, 0.01),
        187px 60px 55px 0px rgba(0, 0, 0, 0);
}

.collection__mobile-wrapper {
    display: none;
}

.collection__card {
    box-shadow:
        0 1px 2px #ccccd11a,
        0 4px 4px #ccccd117,
        0 9px 5px #ccccd10d,
        0 15px 6px #ccccd103,
        0 24px 7px #ccccd100,
        0 4px 4px #00000040;
    background: white;
    border: 1px solid var(--gray);
    border-radius: 12px;
    width: 170px;
}

.collection__img__wrapper {
    height: 140px;
    width: 100%;
    background-color: var(--gray);
    border-radius: 12px;
}

.collection__img__wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.collection__content {
    padding: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

@media (max-width: 1439px) {
    .collection__cells {
        display: none;
    }
    .collection__mobile-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }
}