@media (max-width: 920px) {
    .product-example {
        padding-top: 105px;
        padding-bottom: 115px;
    }

    .product-example-intro {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .product-example-intro > p {
        max-width: 720px;
    }

    .product-example-rules {
        max-width: 720px;
    }

    .product-code-body {
        max-height: 700px;
    }
}

@media (max-width: 680px) {
    .product-example {
        padding-top: 84px;
        padding-bottom: 94px;
    }

    .product-example-intro {
        gap: 35px;
        padding-top: 48px;
    }

    .product-example-intro > p {
        font-size: 24px;
    }

    .product-example-rules > div {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 14px;
        padding: 17px 0;
    }

    .product-code-file {
        margin-top: 48px;
    }

    .product-code-header {
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .product-code-file-name {
        width: 100%;
    }

    .product-code-file-name small {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .product-code-actions {
        width: 100%;
        justify-content: space-between;
    }

    .product-code-actions button {
        min-width: 92px;
    }

    .product-code-body {
        max-height: 620px;
    }

    .product-detail .product-code-body code {
        font-size: 10px;
    }

    .product-code-line {
        grid-template-columns: 48px minmax(max-content, 1fr);
        padding-right: 18px;
    }

    .product-code-line-number {
        padding-right: 13px;
        font-size: 8px;
    }

    .product-code-line-content {
        padding-left: 15px;
    }

    .product-code-footer {
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 14px 16px;
    }

    .product-detail .product-code-footer > code {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 420px) {
    .product-example {
        padding-top: 70px;
        padding-bottom: 78px;
    }

    .product-example-intro {
        padding-top: 40px;
    }

    .product-example-intro > p {
        font-size: 21px;
    }

    .product-example-rules p {
        font-size: 10px;
    }

    .product-code-file {
        margin-top: 40px;
    }

    .product-code-file-name > span {
        width: 32px;
        height: 32px;
    }

    .product-code-actions > span {
        font-size: 7px;
    }

    .product-code-actions button {
        min-width: 34px;
        padding: 0 9px;
    }

    .product-code-actions button > span {
        display: none;
    }

    .product-code-body {
        max-height: 560px;
    }

    .product-detail .product-code-body code {
        font-size: 9px;
        line-height: 1.75;
    }

    .product-code-line {
        grid-template-columns: 42px minmax(max-content, 1fr);
        padding-right: 14px;
    }

    .product-code-line-number {
        padding-right: 11px;
        font-size: 7px;
    }

    .product-code-line-content {
        padding-left: 12px;
    }
}