.comic {
    display: flex;
    flex-wrap: wrap;
    font-family: 'Comic Sans', cursive;
    padding: 1vmin;
    user-select: none;
}

.panel {
    background-color: #fff;
    border: solid 2px #000;
    box-shadow: 0 6px 6px -6px #000;
    display: inline-block;
    flex: 1 1;
    height: 300px;
    margin: 1vmin;
    overflow: hidden;
    position: relative;

}

.panel img {
    display: block;
    max-width: 50%;
    max-height: 50%;
    object-fit: contain;
    margin: auto;
    border-radius: 12px;
}

.text {
    background-color: #fff;
    border: solid 2px #000;
    margin: 0;
    padding: 3px 10px;
}

.top-left {
    left: -6px;
    position: absolute;
    top: -2px;
    transform: skew(-15deg);
}

.bottom-right {
    bottom: -2px;
    position: absolute;
    right: -6px;
    transform: skew(-15deg);
}

.speech {
    background-color: #fff;
    border: solid 2px #000;
    border-radius: 12px;
    display: inline-block;
    margin: .5em;
    padding: .5em 1em;
    position: relative;
}

.speech:before {
    border: solid 12px transparent;
    border-left: solid 12px #000;
    border-top: solid 12px #000;
    bottom: -24px;
    content: "";
    height: 0;
    left: 24px;
    position: absolute;
    transform: skew(-15deg);
    width: 0;
}

.speech:after {
    border: solid 10px transparent;
    border-left: solid 10px #fff;
    border-top: solid 10px #fff;
    bottom: -19px;
    content: "";
    height: 0;
    left: 27px;
    position: absolute;
    transform: skew(-15deg);
    width: 0;
}

.panel:nth-child(1) {
    flex-basis: 600px;
}

.panel:nth-child(2) {
    flex-basis: 600px;
}

.panel:nth-child(3) {
    flex-basis: 400px;
}

.panel:nth-child(4) {
    flex-basis: 600px;
}

.panel:nth-child(5) {
    flex-basis: 600px;
}

.panel:nth-child(6) {
    flex-basis: 400px;
}

.panel:nth-child(7) {
    flex-basis: 600px;
}

.panel:nth-child(8) {
    flex-basis: 600px;
}

.panel:nth-child(9) {
    flex-basis: 800px;
}

.panel:nth-child(10) {
    flex-basis: 400px;
}

.panel:nth-child(11) {
    flex-basis: 400px;
}

.panel:nth-child(12) {
    flex-basis: 800px;
}

.panel:nth-child(13) {
    flex-basis: 400px;
}

.panel:nth-child(14) {
    flex-basis: 400px;
}

.panel:nth-child(15) {
    flex-basis: 600px;
}

.panel:nth-child(16) {
    flex-basis: 400px;
}

.panel:nth-child(17) {
    flex-basis: 600px;
}

.panel:nth-child(18) {
    flex-basis: 400px;
}

.panel:nth-child(19) {
    flex-basis: 400px;
}

.panel:nth-child(20) {
    flex-basis: 600px;
}

.panel:nth-child(21) {
    flex-basis: 600px;
}

.panel:nth-child(22) {
    flex-basis: 400px;
}

.panel:nth-child(23) {
    flex-basis: 400px;
}

.panel:nth-child(24) {
    flex-basis: 400px;
}

.panel:nth-child(25) {
    flex-basis: 600px;
}

.panel:nth-child(26) {
    flex-basis: 400px;
}

.panel:nth-child(27) {
    flex-basis: 400px;
}

.panel:nth-child(28) {
    flex-basis: 600px;
}

.panel:nth-child(29) {
    flex-basis: 400px;
}

.panel:nth-child(30) {
    flex-basis: 400px;
}


.panel:nth-child(4n+1) {
    background-image: radial-gradient(circle, lightblue, deepskyblue);
}

.panel:nth-child(4n+2) {
    background-image: radial-gradient(circle, yellow, orange);
}

.panel:nth-child(4n+3) {
    background-image: radial-gradient(circle, lightcoral, tomato);
}

.panel:nth-child(4n+4) {
    background-image: radial-gradient(circle, palegreen, rgb(154, 205, 50));
}

.panel:nth-child(4n+5) {
    background-image: radial-gradient(circle, #91e0e7, #64b7bf);
}

.panel:nth-child(4n+6) {
    background-image: radial-gradient(circle, #e7718d, #c34462);
}

.panel:nth-child(4n+7) {
    background-image: radial-gradient(circle, yellow, orange);
}

.panel:nth-child(4n+8) {
    background-image: radial-gradient(circle, #e08230, #ec750f);
}

.panel:nth-child(4n+9) {
    background-image: radial-gradient(circle, lightcoral, tomato);
}

.panel:nth-child(4n+10) {
    background-image: radial-gradient(circle, #e08230, #ec750f);
}

.panel:nth-child(4n+11) {
    background-image: radial-gradient(circle, yellow, orange);
}

.panel:nth-child(4n+12) {
    background-image: radial-gradient(circle, #e7718d, #c34462);
}

.panel:nth-child(4n+13) {
    background-image: radial-gradient(circle, palegreen, rgb(154, 205, 50));
}

.panel:nth-child(4n+14) {
    background-image: radial-gradient(circle, #2f99c3, #0d7ca9);
}

.panel:nth-child(4n+15) {
    background-image: radial-gradient(circle, yellow, orange);
}

.panel:nth-child(4n+16) {
    background-image: radial-gradient(circle, #2f99c3, #0d7ca9);
}

.panel:nth-child(4n+17) {
    background-image: radial-gradient(circle, #e7718d, #c34462);
}

.panel:nth-child(4n+18) {
    background-image: radial-gradient(circle, #475da6, #324893);
}

.panel:nth-child(4n+19) {
    background-image: radial-gradient(circle, #e5abb2, #d5949c);
}

.panel:nth-child(4n+20) {
    background-image: radial-gradient(circle, #2f99c3, #0d7ca9);
}

.panel:nth-child(4n+21) {
    background-image: radial-gradient(circle, #91e0e7, #64b7bf);
}

.panel:nth-child(4n+22) {
    background-image: radial-gradient(circle, #e7718d, #c34462);
}

.panel:nth-child(4n+23) {
    background-image: radial-gradient(circle, lightcoral, tomato);
}

.panel:nth-child(4n+24) {
    background-image: radial-gradient(circle, #e08230, #ec750f);
}

.panel:nth-child(4n+25) {
    background-image: radial-gradient(circle, #475da6, #324893);
}

.panel:nth-child(4n+26) {
    background-image: radial-gradient(circle, #2f99c3, #0d7ca9);
}

.panel:nth-child(4n+27) {
    background-image: radial-gradient(circle, #2f99c3, #0d7ca9);
}

.panel:nth-child(4n+28) {
    background-image: radial-gradient(circle, yellow, orange);
}

.panel:nth-child(4n+29) {
    background-image: radial-gradient(circle, palegreen, rgb(154, 205, 50));
}

.panel:nth-child(4n+30) {
    background-image: radial-gradient(circle, #e7718d, #c34462);
}