/* Group Rows */
.pgnv-wrapper .row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between elements */
    width: 100%;
    box-sizing: border-box;
}

/* Group 2: Two Items */
.pgnv-wrapper .group-2 > div {
    flex: 1; /* Distribute evenly */
    max-width: 50%; /* Each a maximum of half-width */
    box-sizing: border-box;
    padding: 0 10px;
}

/* Group 21/12: Two Items */
.pgnv-wrapper .group-12 > div,
.pgnv-wrapper .group-21 > div{
    box-sizing: border-box;
    padding: 0 10px;
}

/* Group 1: Full-Width Element */
.pgnv-wrapper .group-1 > div {
    flex: 1 0 100%; /* Take the full width */
    padding: 0 10px;
}

/* Group 3: Three Items Equally Spread */
.pgnv-wrapper .group-3 > div {
    flex: 1; /* Equally spaced */
    max-width: 33%; /* Each item a maximum of one-third width */
    box-sizing: border-box;
    padding: 0 10px;
}

/* Make It Responsive */
@media (max-width: 768px) {
    .pgnv-wrapper .group-1 > div,
    .pgnv-wrapper .group-3 > div {
        max-width: 100%; /* Stack the rows on smaller screens */
    }
}

.row.group-12 > div:first-child {
    flex: 1; /* 1/3 width */
}

.row.group-12 > div:last-child {
    flex: 2; /* 2/3 width */
}

.row.group-21 > div:first-child {
    flex: 2; /* 2/3 width */
}

.row.group-21 > div:last-child {
    flex: 1; /* 1/3 width */
}