@font-face {
    font-family: 'Freigeist-Medium';
    src: url('font/Freigeist-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 16px;
    margin: 20px;
}

/* Карточки */
.parent > div {
    cursor: pointer;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 380px;
    position: relative;
}

/* Нижняя плашка */
.parent > div span {
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    height: 18%;

    background-color: #D2CAC5;
    border-radius: 0 0 14px 14px;
    padding: 12px 16px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    color: #fff;
    font-size: 16px;
    font-family: 'Freigeist-Medium', sans-serif;
    box-sizing: border-box;
}

/* Стрелка */
.parent > div span img {
    width: 14px;
    height: 14px;
}

/* --- Размещение в сетке --- */

.div3 { grid-column: span 2; }

.div4 { grid-column: span 2; grid-row: 2; }
.div5 { grid-column: 3; grid-row: 2; }
.div6 { grid-column: 4; grid-row: 2; }

.div7 { grid-row: 3; }
.div8 { grid-row: 3; }

.div9  { grid-column: span 2; grid-row: 3; }

.div10 { grid-column: span 2; grid-row: 4; }
.div11 { grid-column: 3; grid-row: 4; }
.div12 { grid-column: 4; grid-row: 4; }

.div13 { grid-row: 5; }
.div14 { grid-row: 5; }

.div15 { grid-column: span 2; grid-row: 5; }

/* --- Фоновые изображения --- */

.div1  { background-image: url('images/1.png'); }
.div2  { background-image: url('images/2.png'); }
.div3  { background-image: url('images/3.png'); }
.div4  { background-image: url('images/4.png'); }
.div5  { background-image: url('images/5.png'); }
.div6  { background-image: url('images/6.png'); }
.div7  { background-image: url('images/7.png'); }
.div8  { background-image: url('images/8.png'); }
.div9  { background-image: url('images/9.png'); }
.div10 { background-image: url('images/10.png'); }
.div11 { background-image: url('images/11.png'); }
.div12 { background-image: url('images/12.png'); }
.div13 { background-image: url('images/13.png'); }
.div14 { background-image: url('images/14.png'); }
.div15 { background-image: url('images/15.png'); }

.mobile{
    display: none;
}

@media (max-width: 1024px) {
    .mobile{
        display: block;
    }

    .desktop{
        display: none;
    }

    .parent {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(8, 1fr);
        gap: 20px;
        margin: 10px;
    }

    .parent > div {
        grid-column: auto !important;
        grid-row: auto !important;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        background-size: contain;
        background-position: top;
        height: 260px;
    }

    .parent > div span{
        position: static;
        border-radius: 0;
        color: #AEA39C;
        font-size: 14px;
        height: auto;
        padding: 0;
        margin: 210px 0 0 0;
        background-color: #fff;
    }

    .div3  { background-image: url('images/3-1.png'); }
    .div4  { background-image: url('images/4-1.png'); }
    .div9  { background-image: url('images/9-1.png'); }
    .div10 { background-image: url('images/10-1.png'); }
    .div15 { background-image: url('images/15-1.png'); }
}