* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 0.2fr;
    gap: 10px;
    grid-template-areas:
        "item-1 item-1 item-2 item-2"
        "item-3 item-4 item-5 item-6"
        "item-7 item-8 item-8 item-6"
        "item-9 item-10 item-11 item-11";
}

.showcase-item {
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.showcase-item img {
    max-width: 100%;
    height: auto;
}

.item-1 { grid-area: item-1; }
.item-2 { grid-area: item-2; background-color: #ffcc80; }
.item-3 { grid-area: item-3; background-color: #ffab91; }
.item-4 { grid-area: item-4; }
.item-5 { grid-area: item-5; }
.item-6 { grid-area: item-6; background-color: #b39ddb; }
.item-7 { grid-area: item-7; background-color: #80cbc4; }
.item-8 { grid-area: item-8; background-color: #90caf9; }
.item-9 { grid-area: item-9; background-color: #81d4fa; }
.item-10 { grid-area: item-10; }
.item-11 { grid-area: item-11; background-color: #333; color: #fff; }

@media (max-width: 991px) {
    .container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "item-2 item-2"
            "item-1 item-1"
            "item-3 item-7"
            "item-4 item-5"
            "item-9 item-6"
            "item-8 item-6"
            "item-10 item-10"
            "item-11 item-11";
    }
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "item-1"
            "item-2"
            "item-3"
            "item-4"
            "item-5"
            "item-6"
            "item-7"
            "item-8"
            "item-9"
            "item-10"
            "item-11";
    }
}