.porto-block-row {
display: flex;
flex-wrap: wrap; --porto-col-gap: var(--porto-column-gap, 20px);
column-gap: var(--porto-col-gap);
row-gap: var(--porto-col-gap);
}
.porto-block-column {
display: flex;
flex-direction: column; flex: 1 1 0%;
min-width: 0;
max-width: 100%;
} @media (max-width: 767px) {
.porto-block-column {
flex: 1 1 100%;
}
} .porto-row-layouts-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
width: 100%;
}
.porto-row-layout {
display: flex;
gap: 2px;
width: 62px;
height: 28px;
padding: 0;
border: 1px solid transparent;
border-radius: 2px;
background: none;
cursor: pointer;
}
.porto-row-layout > span {
display: block;
flex-basis: 0;
background: #d7d7d7;
border-radius: 1px;
}
.porto-row-layout:hover > span,
.porto-row-layout.is-active > span {
background: #1e1e1e;
}
.porto-row-layouts .components-base-control__label {
display: block;
margin-bottom: 8px;
}
.porto-row-layouts .porto-row-layouts-list {
justify-content: flex-start;
}