.DIAGRAM .b-frame {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(12, 1fr);
}

@media screen and (max-width: 960px) {
    .DIAGRAM .content br { display: none; }
}



/* Iceburg top */

.DIAGRAM[data-variant="_iceberg_top"] .b-frame {
    padding-bottom: 0;
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(12, 1fr);
}

.DIAGRAM[data-variant="_iceberg_top"] .content {
    grid-area: 1/1/5/5;
    margin: 0 0 50rem;
}

.DIAGRAM[data-variant="_iceberg_top"] .image {
    grid-area: 1/5/5/13;
    align-self: end;
}

.DIAGRAM[data-variant="_iceberg_top"] .image img { margin: 0 0 -0.5rem; }

@media screen and (max-width: 960px) {
    
    .DIAGRAM[data-variant="_iceberg_top"] .b-frame {
        grid-template-rows: repeat(2, auto);
        grid-template-columns: repeat(4, 1fr);
    }
    .DIAGRAM[data-variant="_iceberg_top"] .content {
        grid-area: 1/1/2/5;
        margin: 0 0 20rem;
    }
    
    .DIAGRAM[data-variant="_iceberg_top"] .image {
        grid-area: 2/1/3/5;
        align-self: end;
    }

    .DIAGRAM[data-variant="_iceberg_top"] .image img { margin: 0 0 -0.5rem; }
}


/* Iceburg bottom */

.DIAGRAM[data-variant="_iceberg_bottom"] { background: rgba(117, 166, 255, 0.20); }

.DIAGRAM[data-variant="_iceberg_bottom"] .b-frame {
    padding-top: 0;
    display: grid;
    grid-template-rows: repeat(1, 1fr);
}

.DIAGRAM[data-variant="_iceberg_bottom"] .content {
    margin: 50rem 0 0;
    grid-area: 1/1/5/5;
}

.DIAGRAM[data-variant="_iceberg_bottom"] .image {
    grid-area: 1/5/5/13;
}

.DIAGRAM[data-variant="_iceberg_bottom"] .image img { margin: -0.5rem 0 0; }

@media screen and (max-width: 960px) {
    .DIAGRAM[data-variant="_iceberg_bottom"] .b-frame {
        grid-template-rows: repeat(2, auto);
        grid-template-columns: repeat(4, 1fr);
    }
    .DIAGRAM[data-variant="_iceberg_bottom"] .content {
        grid-area: 2/1/3/5;
        margin: 20rem 0 0;
    }
    
    .DIAGRAM[data-variant="_iceberg_bottom"] .image {
        grid-area: 1/1/2/5;
        align-self: end;
    }
}



/* Piramid */

.DIAGRAM[data-variant="_piramid"] {position: relative;}

.DIAGRAM[data-variant="_piramid"] .b-frame {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: repeat(12, 1fr);
}


.DIAGRAM[data-variant="_piramid"] .content {
    grid-area: 1/1/5/5;
}

.DIAGRAM[data-variant="_piramid"] .image {
    grid-area: 1/3/5/13;
}

@media screen and (max-width: 960px) {
    .DIAGRAM[data-variant="_piramid"] .b-frame {
        grid-template-rows: repeat(2, auto);
        grid-template-columns: repeat(4, 1fr);
    }

    .DIAGRAM[data-variant="_piramid"] .content {
        grid-area: 1/1/2/5;
    }
    
    .DIAGRAM[data-variant="_piramid"] .image {
        grid-area: 2/1/3/5;
        align-self: end;
        margin: 20rem 0 0;
    }
}