/**
 * Styling specific to the Open Source Block.
 */

section.source-code .source-codes-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-8);
}

section.source-code .blurb,
section.source-code .cards .card .blurb {
    color: var(--color-copy-secondary);
    font: var(--font-copy-md);
}

section.source-code .code-sdk,
section.source-code .source-code {
    padding: var(--spacing-11) 0;
}
section.source-code .code-sdk .column-left,
section.source-code .source-code .column-left {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-7);
}

section.source-code .source-code .column-right {
    grid-column: 5 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-8);
}

section.source-code .code-sdk .column-right {
    grid-column: 5 / -1;
}

section.source-code .simple-card,
section.source-code .card {
    padding: var(--spacing-8);
    display: flex;
    gap: var(--spacing-5);
    flex: 1 1 0;
    justify-content: space-between;
    flex-direction: column;
    border: 1px solid var(--color-grey-150);
    border-radius: 8px;
}

section.source-code .card .icon-box {
    height: 48px;
    width: 48px;
}

section.source-code .card .button,
section.source-code .simple-card .button {
    margin-top: var(--spacing-9);
}

section.source-code .comment {
    padding-top: var(--spacing-10);
    grid-column: 5 / -1;
}

/* Breakpoints M and S */
@media screen and (min-width: 0px) and (max-width: 1080px) {
    section.source-code .code-sdk .column-left,
    section.source-code .source-code .column-left,
    section.source-code .comment {
        grid-column: 1 / -1;
        padding-bottom: var(--spacing-7);
    }

    section.source-code .code-sdk .column-right,
    section.source-code .source-code .column-right {
        grid-column: 1 / -1;
    }
}

/* Breakpoint S */
@media screen and (min-width: 0px) and (max-width: 768px) {
    section.source-code .code-sdk .column-right,
    section.source-code .source-code .column-right {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: var(--spacing-8);
    }
}