Template:Abyat/styles.css

.abyat-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  text-align: justify;
  text-align-last: justify;
  margin: auto;
  direction: rtl;
}

.abyat-wrapper.mashtoor {
	grid-template-columns: 1fr;
	padding-left: 0;
}

.abyat-wrapper.free {
	grid-template-columns: 1fr;
	padding-left: 0;
	text-align: right;
	text-align-last: right;
}

.abyat-single_bayt {
  grid-column: 2 / 4;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
.abyat-wrapper > div {
    white-space: nowrap;
    break-inside: avoid;
    page-break-inside:avoid;
}

.abyat-sdr {
	grid-column: 1 / 3;
    padding-left: 1em;
}

.abyat-ajz {
	grid-column: 3 / 5;
    padding-right: 1em;
}

/* shaterbyshater format */
.abyat-wrapper.abyat-shaterbyshater {
	grid-template-columns: 1fr;
}

.abyat-shaterbyshater .abyat-single_bayt {
  grid-column: unset;
  padding-left: 2.5em;
  padding-right: 2.5em;
}
.abyat-shaterbyshater .abyat-sdr {
	grid-column: unset;
    padding-left: 5em;
}
.abyat-shaterbyshater .abyat-ajz {
	grid-column: unset;
    padding-right: 5em;
}
@media screen and (max-width: 600px) {
	.abyat-wrapper {
		grid-template-columns: 1fr;
	}

	.abyat-single_bayt {
 grid-column: unset;
 padding-left: 2.5em;
 padding-right: 2.5em;
	}
	.abyat-sdr {
		grid-column: unset;
 padding-left: 5em;
	}
	.abyat-ajz {
		grid-column: unset;
 padding-right: 5em;
	}
}