/* From 481 | Phone landscape & bigger */
@media (min-width: $mobile-breakpoint + 1) {

	/* Grid */
	.wpbf-grid-small-1-1 > * {
		width: 100%;
	}
	.wpbf-grid-small-1-2 > * {
		width: 50%;
	}
	.wpbf-grid-small-1-3 > * {
		width: 33.333%;
	}
	.wpbf-grid-small-2-3 > * {
		width: 66.666%;
	}
	.wpbf-grid-small-1-4 > * {
		width: 25%;
	}
	.wpbf-grid-small-1-5 > * {
		width: 20%;
	}
	.wpbf-grid-small-1-6 > * {
		width: 16.666%;
	}
	.wpbf-grid-small-1-10 > * {
		width: 10%;
	}

	/* Grid cells */

	// Whole
	.wpbf-small-1-1 {
		width: 100%;
	}
	// Halves
	.wpbf-small-1-2,
	.wpbf-small-2-4,
	.wpbf-small-3-6,
	.wpbf-small-5-10 {
		width: 50%;
	}
	// Thirds
	.wpbf-small-1-3,
	.wpbf-small-2-6 {
		width: 33.333%;
	}
	.wpbf-small-2-3,
	.wpbf-small-4-6 {
		width: 66.666%;
	}
	// Quarters
	.wpbf-small-1-4 {
		width: 25%;
	}
	.wpbf-small-3-4 {
		width: 75%;
	}
	// Fifths
	.wpbf-small-1-5,
	.wpbf-small-2-10 {
		width: 20%;
	}
	.wpbf-small-2-5,
	.wpbf-small-4-10 {
		width: 40%;
	}
	.wpbf-small-3-5,
	.wpbf-small-6-10 {
		width: 60%;
	}
	.wpbf-small-4-5,
	.wpbf-small-8-10 {
		width: 80%;
	}
	// Sixths
	.wpbf-small-1-6 {
		width: 16.666%;
	}
	.wpbf-small-5-6 {
		width: 83.333%;
	}
	// Tenths
	.wpbf-small-1-10 {
		width: 10%;
	}
	.wpbf-small-3-10 {
		width: 30%;
	}
	.wpbf-small-7-10 {
		width: 70%;
	}
	.wpbf-small-9-10 {
		width: 90%;
	}

}

/* From 769 | Tablet & bigger */
@media (min-width: $tablet-breakpoint + 1) {

	/* Gutenberg */

	// Wide aligned images
	.wpbf-no-sidebar .alignwide {
		margin-left: -50px;
		margin-right: -50px;
		max-width: unset;
		width: auto;
	}

	// Sidebar
	.wpbf-grid-divider > [class*='wpbf-medium-']:not(.wpbf-medium-1-1):nth-child(n+2) {
		border-left: 1px solid $base-color;
	}

	/* Grid */
	.wpbf-grid-medium-1-1 > * {
		width: 100%;
	}
	.wpbf-grid-medium-1-2 > * {
		width: 50%;
	}
	.wpbf-grid-medium-1-3 > * {
		width: 33.333%;
	}
	.wpbf-grid-medium-2-3 > * {
		width: 66.666%;
	}
	.wpbf-grid-medium-1-4 > * {
		width: 25%;
	}
	.wpbf-grid-medium-1-5 > * {
		width: 20%;
	}
	.wpbf-grid-medium-1-6 > * {
		width: 16.666%;
	}
	.wpbf-grid-medium-1-10 > * {
		width: 10%;
	}

	/* Grid cells */

	// Whole
	.wpbf-medium-1-1 {
		width: 100%;
	}
	// Halves
	.wpbf-medium-1-2,
	.wpbf-medium-2-4,
	.wpbf-medium-3-6,
	.wpbf-medium-5-10 {
		width: 50%;
	}
	// Thirds
	.wpbf-medium-1-3,
	.wpbf-medium-2-6 {
		width: 33.333%;
	}
	.wpbf-medium-2-3,
	.wpbf-medium-4-6 {
		width: 66.666%;
	}
	// Quarters
	.wpbf-medium-1-4 {
		width: 25%;
	}
	.wpbf-medium-3-4 {
		width: 75%;
	}
	// Fifths
	.wpbf-medium-1-5,
	.wpbf-medium-2-10 {
		width: 20%;
	}
	.wpbf-medium-2-5,
	.wpbf-medium-4-10 {
		width: 40%;
	}
	.wpbf-medium-3-5,
	.wpbf-medium-6-10 {
		width: 60%;
	}
	.wpbf-medium-4-5,
	.wpbf-medium-8-10 {
		width: 80%;
	}
	// Sixths
	.wpbf-medium-1-6 {
		width: 16.666%;
	}
	.wpbf-medium-5-6 {
		width: 83.333%;
	}
	// Tenths
	.wpbf-medium-1-10 {
		width: 10%;
	}
	.wpbf-medium-3-10 {
		width: 30%;
	}
	.wpbf-medium-7-10 {
		width: 70%;
	}
	.wpbf-medium-9-10 {
		width: 90%;
	}

}

/* From 1025 | Desktop & bigger */
@media (min-width: $desktop-breakpoint + 1) {

	/* Gutenberg */

	// Wide aligned images
	.wpbf-no-sidebar .alignwide {
		margin-left: -75px;
		margin-right: -75px;
	}

	/* Sidebar */
	.wpbf-grid-divider > [class*='wpbf-large-']:not(.wpbf-large-1-1):nth-child(n+2) {
		border-left: 1px solid $base-color;
	}

	/* Grid */
	.wpbf-grid-large-1-1 > * {
		width: 100%;
	}
	.wpbf-grid-large-1-2 > * {
		width: 50%;
	}
	.wpbf-grid-large-1-3 > * {
		width: 33.333%;
	}
	.wpbf-grid-large-2-3 > * {
		width: 66.666%;
	}
	.wpbf-grid-large-1-4 > * {
		width: 25%;
	}
	.wpbf-grid-large-1-5 > * {
		width: 20%;
	}
	.wpbf-grid-large-1-6 > * {
		width: 16.666%;
	}
	.wpbf-grid-large-1-10 > * {
		width: 10%;
	}

	/* Grid cells */

	// Whole
	.wpbf-large-1-1 {
		width: 100%;
	}
	/* Halves */
	.wpbf-large-1-2,
	.wpbf-large-2-4,
	.wpbf-large-3-6,
	.wpbf-large-5-10 {
		width: 50%;
	}
	// Thirds
	.wpbf-large-1-3,
	.wpbf-large-2-6 {
		width: 33.333%;
	}
	.wpbf-large-2-3,
	.wpbf-large-4-6 {
		width: 66.666%;
	}
	// Quarters
	.wpbf-large-1-4 {
		width: 25%;
	}
	.wpbf-large-3-4 {
		width: 75%;
	}
	// Fifths
	.wpbf-large-1-5,
	.wpbf-large-2-10 {
		width: 20%;
	}
	.wpbf-large-2-5,
	.wpbf-large-4-10 {
		width: 40%;
	}
	.wpbf-large-3-5,
	.wpbf-large-6-10 {
		width: 60%;
	}
	.wpbf-large-4-5,
	.wpbf-large-8-10 {
		width: 80%;
	}
	// Sixths
	.wpbf-large-1-6 {
		width: 16.666%;
	}
	.wpbf-large-5-6 {
		width: 83.333%;
	}
	// Tenths
	.wpbf-large-1-10 {
		width: 10%;
	}
	.wpbf-large-3-10 {
		width: 30%;
	}
	.wpbf-large-7-10 {
		width: 70%;
	}
	.wpbf-large-9-10 {
		width: 90%;
	}

}

/* From 1200 | Large screen & bigger */
@media (min-width: $large-screen-breakpoint + 1) {

	/* Grid */
	.wpbf-grid-xlarge-1-1 > * {
		width: 100%;
	}
	.wpbf-grid-xlarge-1-2 > * {
		width: 50%;
	}
	.wpbf-grid-xlarge-1-3 > * {
		width: 33.333%;
	}
	.wpbf-grid-xlarge-2-3 > * {
		width: 66.666%;
	}
	.wpbf-grid-xlarge-1-4 > * {
		width: 25%;
	}
	.wpbf-grid-xlarge-1-5 > * {
		width: 20%;
	}
	.wpbf-grid-xlarge-1-6 > * {
		width: 16.666%;
	}
	.wpbf-grid-xlarge-1-10 > * {
		width: 10%;
	}

	/* Grid cells */

	// Whole
	.wpbf-xlarge-1-1 {
		width: 100%;
	}
	// Halves
	.wpbf-xlarge-1-2,
	.wpbf-xlarge-2-4,
	.wpbf-xlarge-3-6,
	.wpbf-xlarge-5-10 {
		width: 50%;
	}
	// Thirds
	.wpbf-xlarge-1-3,
	.wpbf-xlarge-2-6 {
		width: 33.333%;
	}
	.wpbf-xlarge-2-3,
	.wpbf-xlarge-4-6 {
		width: 66.666%;
	}
	// Quarters
	.wpbf-xlarge-1-4 {
		width: 25%;
	}
	.wpbf-xlarge-3-4 {
		width: 75%;
	}
	// Fifths
	.wpbf-xlarge-1-5,
	.wpbf-xlarge-2-10 {
		width: 20%;
	}
	.wpbf-xlarge-2-5,
	.wpbf-xlarge-4-10 {
		width: 40%;
	}
	.wpbf-xlarge-3-5,
	.wpbf-xlarge-6-10 {
		width: 60%;
	}
	.wpbf-xlarge-4-5,
	.wpbf-xlarge-8-10 {
		width: 80%;
	}
	// Sixths
	.wpbf-xlarge-1-6 {
		width: 16.666%;
	}
	.wpbf-xlarge-5-6 {
		width: 83.333%;
	}
	// Tenths
	.wpbf-xlarge-1-10 {
		width: 10%;
	}
	.wpbf-xlarge-3-10 {
		width: 30%;
	}
	.wpbf-xlarge-7-10 {
		width: 70%;
	}
	.wpbf-xlarge-9-10 {
		width: 90%;
	}

}

/* Until 1200 */
@media screen and (max-width: $large-screen-breakpoint) {

	/* Margin */
	.wpbf-margin-xlarge {
		margin-top: $margin-large;
		margin-bottom: $margin-large;
	}
	.wpbf-margin-xlarge-top {
		margin-top: $margin-large;
	}
	.wpbf-margin-xlarge-bottom {
		margin-bottom: $margin-large;
	}
	.wpbf-margin-xlarge-left {
		margin-left: $margin-large;
	}
	.wpbf-margin-xlarge-right {
		margin-right: $margin-large;
	}

	/* Padding */
	.wpbf-padding-xlarge {
		padding-top: $padding-large;
		padding-bottom: $padding-large;
	}
	.wpbf-padding-xlarge-top {
		padding-top: $padding-large;
	}
	.wpbf-padding-xlarge-bottom {
		padding-bottom: $padding-large;
	}
	.wpbf-padding-xlarge-left {
		padding-left: $padding-large;
	}
	.wpbf-padding-xlarge-right {
		padding-right: $padding-large;
	}

}

/* Until 1024 */
@media screen and (max-width: $desktop-breakpoint) {

	/* Margin */
	.wpbf-margin-large, .wpbf-margin-xlarge {
		margin-top: $margin-medium;
		margin-bottom: $margin-medium;
	}
	.wpbf-margin-large-top {
		margin-top: $margin-medium;
	}
	.wpbf-margin-large-bottom {
		margin-bottom: $margin-medium;
	}
	.wpbf-margin-large-left {
		margin-left: $margin-medium;
	}
	.wpbf-margin-large-right {
		margin-right: $margin-medium;
	}
	.wpbf-margin-xlarge-top {
		margin-top: $margin-medium;
	}
	.wpbf-margin-xlarge-bottom {
		margin-bottom: $margin-medium;
	}
	.wpbf-margin-xlarge-left {
		margin-left: $margin-medium;
	}
	.wpbf-margin-xlarge-right {
		margin-right: $margin-medium;
	}

	/* Padding */
	.wpbf-padding-large, .wpbf-padding-xlarge {
		padding-top: $padding-medium;
		padding-bottom: $padding-medium;
	}
	.wpbf-padding-large-top {
		padding-top: $padding-medium;
	}
	.wpbf-padding-large-bottom {
		padding-bottom: $padding-medium;
	}
	.wpbf-padding-large-left {
		padding-left: $padding-medium;
	}
	.wpbf-padding-large-right {
		padding-right: $padding-medium;
	}
	.wpbf-padding-xlarge-top {
		padding-top: $padding-medium;
	}
	.wpbf-padding-xlarge-bottom {
		padding-bottom: $padding-medium;
	}
	.wpbf-padding-xlarge-left {
		padding-left: $padding-medium;
	}
	.wpbf-padding-xlarge-right {
		padding-right: $padding-medium;
	}

}

/* Until 768 */
@media screen and (max-width: $tablet-breakpoint) {

	/* General */

	// Pre header & footer
	.wpbf-footer-two-columns,
	.wpbf-pre-header-two-columns {
		display: block;
		.wpbf-inner-footer-left,
		.wpbf-inner-footer-right,
		.wpbf-inner-pre-header-left,
		.wpbf-inner-pre-header-right {
			display: block;
			width: 100%;
			text-align: center;
		}
	}

 // Right navigation
.wpbf-pre-header {
	.wpbf-inner-pre-header-right {
		.wpbf-menu {
			float: none;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
		}
	}
}

// Left navigation
.wpbf-pre-header {
	.wpbf-inner-pre-header-left {
		.wpbf-menu {
			float: none;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
		}
	}
}

.wpbf-pre-header {
	.wpbf-menu .sub-menu,
	.wpbf-sub-menu > .menu-item-has-children > a:after {
		display: none !important;
	}
}

 // Right navigation
 .wpbf-page-footer {
 	.wpbf-inner-footer-right {
		.wpbf-menu {
			float: none;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
		}
	}
}

// Left navigation
.wpbf-page-footer {
	.wpbf-inner-footer-left {
		.wpbf-menu {
			float: none;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
		}
	}
}

}

/* Until 480 */
@media screen and (max-width: $mobile-breakpoint) {

	/* Margin */
	.wpbf-margin-medium, .wpbf-margin-large, .wpbf-margin-xlarge {
		margin-top: $margin;
		margin-bottom: $margin;
	}
	.wpbf-margin-large-top {
		margin-top: $margin;
	}
	.wpbf-margin-large-bottom {
		margin-bottom: $margin;
	}
	.wpbf-margin-large-left {
		margin-left: $margin;
	}
	.wpbf-margin-large-right {
		margin-right: $margin;
	}
	.wpbf-margin-medium-top {
		margin-top: $margin;
	}
	.wpbf-margin-medium-bottom {
		margin-bottom: $margin;
	}
	.wpbf-margin-medium-left {
		margin-left: $margin;
	}
	.wpbf-margin-medium-right {
		margin-right: $margin;
	}
	.wpbf-margin-xlarge-top {
		margin-top: $margin;
	}
	.wpbf-margin-xlarge-bottom {
		margin-bottom: $margin;
	}
	.wpbf-margin-xlarge-left {
		margin-left: $margin;
	}
	.wpbf-margin-xlarge-right {
		margin-right: $margin;
	}

	/* Padding */
	.wpbf-padding-medium, .wpbf-padding-large, .wpbf-padding-xlarge {
		padding-top: $padding;
		padding-bottom: $padding;
	}
	.wpbf-padding-large-top {
		padding-top: $padding;
	}
	.wpbf-padding-large-bottom {
		padding-bottom: $padding;
	}
	.wpbf-padding-large-left {
		padding-left: $padding;
	}
	.wpbf-padding-large-right {
		padding-right: $padding;
	}
	.wpbf-padding-medium-top {
		padding-top: $padding;
	}
	.wpbf-padding-medium-bottom {
		padding-bottom: $padding;
	}
	.wpbf-padding-medium-left {
		padding-left: $padding;
	}
	.wpbf-padding-medium-right {
		padding-right: $padding;
	}
	.wpbf-padding-xlarge-top {
		padding-top: $padding;
	}
	.wpbf-padding-xlarge-bottom {
		padding-bottom: $padding;
	}
	.wpbf-padding-xlarge-left {
		padding-left: $padding;
	}
	.wpbf-padding-xlarge-right {
		padding-right: $padding;
	}

}


/* Visibility */

/* Desktop and bigger */
@media (min-width: $desktop-breakpoint + 1) {
	.wpbf-visible-small {
		display: none !important;
	}
	.wpbf-visible-medium {
		display: none !important;
	}
	.wpbf-hidden-large {
		display: none !important;
	}
}

/* Tablets portrait */
@media (min-width: $tablet-breakpoint + 1) and (max-width: $desktop-breakpoint) {
	.wpbf-visible-small {
		display: none !important;
	}
	.wpbf-visible-large {
		display: none !important ;
	}
	.wpbf-hidden-medium {
		display: none !important;
	}
}

/* Tablets */
@media (max-width: $tablet-breakpoint) {
	.wpbf-visible-medium {
		display: none !important;
	}
	.wpbf-visible-large {
		display: none !important;
	}
	.wpbf-hidden-small {
		display: none !important;
	}
}

/* Row & column order */

/* From 1025 */
@media (min-width: $desktop-breakpoint + 1) {
	.wpbf-row-reverse-large {
		flex-direction: row-reverse;
	}
	.wpbf-column-reverse-large {
		flex-direction: column-reverse;
	}
}

/* Until 768 */
@media screen and (max-width: $tablet-breakpoint) {
	.wpbf-row-reverse-medium {
		flex-direction: row-reverse;
	}
	.wpbf-column-reverse-medium {
		flex-direction: column-reverse;
	}
}

/* Until 480 */
@media screen and (max-width: $mobile-breakpoint) {
	.wpbf-row-reverse-small {
		flex-direction: row-reverse;
	}
	.wpbf-column-reverse-small {
		flex-direction: column-reverse;
	}
}
