.pp-section {
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
}

.pp-section img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
    border-radius: var(--border-radius-md);
    border: 2px solid var(--bg-secondary)
}

.pp-block-single,
.pp-block-duo,
.pp-block-trio,
.pp-block-quad {
    width: auto;
    height: 100%;
    display: block;
    margin-bottom: 16px;
}

.pp-block-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pp-block-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.pp-block-quad {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 768px) {
    .pp-section {
        max-width: var(--max-width-mobile);
    }

    .pp-block-trio {
        grid-template-columns: 1fr 1fr;
    }

    .pp-block-quad {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 420px) {
    .pp-section{
        max-width: var(--max-width-mobile);
    }
    .pp-block-duo {
    grid-template-columns: 1fr 1fr;
    }
    .pp-block-trio {
    grid-template-columns: repeat(3, 1fr);
    }

    .pp-block-quad {
        grid-template-columns: repeat(4, 1fr);
    }
}