/* Global image width classes */
.image80pc {
    --default-width: 80%;
    --custom-width: var(--default-width);
    max-width: var(--custom-width, auto);
    height: auto;
    margin: auto;
}

.image80pc[data-width] {
    --custom-width: attr(data-width);
    max-width: var(--custom-width);
}

.image40pc {
    --custom-width: 40%;
    max-width: var(--custom-width);
}

.image60pc {
    --custom-width: 60%;
    max-width: var(--custom-width);
}

/* Media query for mobile - 100% width */
@media (max-width: 768px) {
    .image80pc,
    .image40pc,
    .image60pc {
        --custom-width: 100%;
        max-width: var(--custom-width);
        width: 100%;
    }
    .image80pc[data-width],
    .image40pc[data-width],
    .image60pc[data-width] {
        --custom-width: 100%;
        max-width: var(--custom-width);
        width: 100%;
    }
}