.side.right-side {
    display: grid;
    width: 100%;
    height: 100%;
    gap: 8px;
    grid-template-rows: calc(70% - 4px) calc(30% - 4px);
}

.right-side .top,
.right-side .bottom {
    border-radius: 24px;
    background-color: var(--color-white);

}

.right-side .top {
    padding: 8px;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(minmax(0, 1fr), 3);
    grid-template-rows: repeat(minmax(0, 1fr), 2);
    gap: 8px;
}

.grid-item {
    width: 100%;
    height: 100%;
    display: block;
    background-color: #c4c4c4;
    border-radius: 16px;
    min-width: 0;
    overflow: hidden;
    word-break: break-word;
}

.grid-item div {
    display: none;
}

.grid-item img {
    display: inline-block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

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

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

.right-side .bottom {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: var(--color-purple);
    color: var(--color-white);
}

@media (max-width: 480px) {
    .side.right-side {
        grid-template-rows: auto auto;
    }

    .right-side .top,
    .right-side .bottom {
        border-radius: 18px;
    }

    .right-side .top {
        height: auto;
        grid-template-columns: 100%;
        grid-template-rows: repeat(auto, 5);
        gap: 24px;
    }


    .grid-item {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
        background: none;
    }

    .grid-item div {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;
        height: auto;
        /* background: var(--color-white); */
        display: none;
    }

    .grid-item div span:first-child {
        font-family: var(--font-primary);
        font-size: 12px;
    }

    .grid-item div span:last-child {
        font-size: 12px;
        color: var(--color-gris);
        line-height: 120%;
    }

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

    .item-2 {
        grid-column: 1 / 2;
        grid-row: 1/2;
    }

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

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

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