@media (orientation: portrait) {
	/* -------------- */
	/*   Components   */
	/* -------------- */

	.hide-on-mobile {
		display: none !important;
	}

	.show-on-mobile {
		display: block !important;
	}

	#showcase {
		& .pods {
			margin-right: 0;
			justify-content: center;
			gap: 8px;

			> a {
				& .pod {
					width: 14vh;

					> div {
						margin: 4px;

						> h3 {
							font-size: 16px;
						}

						> div {
							display: none;
						}
					}
				}
			}
		}
	}

	#landing {
		> .wrapper {
			> h1 {
				font-size: 40px;
			}

			> p {
				font-size: 18px;
			}

			> .vessel {
				column-gap: 1000px;
			}
		}
	}

	.yg-tabs {
		& .yg-benefits-selectors {
			gap: 8px;

			> div {
				background: rgb(25 116 182 / 10%);
			}
		}
	}

	.btn {
		min-width: 150px;
		padding: 10px 20px;
		font-size: 14px;
	}

	.dropdown {
		& .label {
			display: none;
		}

		& .options {
			position: relative;
			top: 0;
			display: block;
			border: 1px solid var(--light-grey);
			box-shadow: none;
		}
	}

	.application-preview {
		padding-inline: 4px;

		& .vessel {
			&.left {
				& h1 {
					margin-bottom: 12px;
					font-size: 4vh;
				}
			}

			&.right {
				padding: 16px;

				& form {
					& fieldset {
						& .text-input,
						& .select-input {
							width: 100%;
						}
					}
				}
			}
		}
	}

	main.portal {
		> .portal-content {
			margin-left: 0;
		}
	}

	/* --------- */
	/*   Pages   */
	/* --------- */

	#home {
		& #our-mission {
			padding: 5vh 0;

			& .container {
				width: 90%;
			}
		}
	}

	#fanvil {
		& #benefits-of-fanvil {
			display: flex;
			padding: 4vh 2vh 0;

			& .left {
				width: 100%;
				margin-bottom: 2vh;
			}

			& .right {
				width: 100%;
			}
		}
	}

	#tcx-videos {
		& #video-samples {
			& .videos-grid {
				grid-template-columns: repeat(2, 1fr);
				gap: 4px;

				> div {
					height: 100px;
				}
			}
		}

		& #worldwide {
			padding: 8vh 5%;

			& h2 {
				width: 100%;
				font-size: 3vh;
			}

			& .vessel {
				& .left {
					width: 100%;
				}

				& .right {
					display: none;
				}
			}
		}
	}

	#product {
		& #information {
			width: 95%;

			& .container {
				& .left-half {
					width: 100%;
				}

				& .right-half {
					width: 100%;

					& .product-title {
						font-size: 3vh;
					}

					& .product-category {
						font-size: 2vh;
					}
				}
			}
		}

		& #description {
			width: 95%;

			& .options {
				& .option {
					font-size: 2.5vh;
				}

				& i {
					font-size: 2vh;
				}
			}
		}
	}

	#blogs,
	#blog {
		& .page-title {
			& h1 {
				margin: 5vh 0 2vh;
			}

			& .input {
				width: 90%;
				margin-bottom: 5vh;
			}
		}

		& .post_preview {
			width: 100%;
		}
	}

	#blog {
		> .wrapper {
			> h1 {
				margin-top: 24px;
			}

			& .blog {
				& #linkedin-link {
					display: none;
				}

				& .the_post {
					width: 100%;
					padding: 12px;
				}
			}
		}
	}

	#privacy,
	#slavery-policy,
	#disclaimer,
	#fair-usage-policy {
		> .body-content {
			> .vessel {
				padding: 20px 16px;
			}
		}
	}

	#login,
	#password-reset {
		& .vessel {
			padding: 56px 40px 60px;
		}
	}

	#password-sender {
		& .container {
			width: 95%;
			padding: 3vh 0;
		}
	}

	#send-credentials {
		& #content {
			width: 95%;
		}

		& #tutorial {
			margin: 0;
			border: 3px solid #111;

			& .fa-angle-left {
				top: unset;
				bottom: -5vh;
				left: 1vh;
				transform: translateY(0);
				border-radius: 0 0 5px 5px;
				padding: 1.75vh;
				font-size: 1.5vh;
			}

			& .fa-angle-right {
				top: unset;
				bottom: -5vh;
				right: 1vh;
				transform: translateY(0);
				border-radius: 0 0 5px 5px;
				padding: 1.75vh;
				font-size: 1.5vh;
			}

			& p {
				max-width: 90%;
				padding: 1vh;
				font-size: 1.25vh;
			}

			& #close-btn {
				bottom: -5vh;
				padding: 1.5vh;
				font-size: 1.5vh;
			}
		}
	}

	#allProducts {
		margin: 1vh 0.5vh;

		& .blue {
			display: none !important;
		}

		& section#top {
			& nav {
				> * {
					font-size: 1.3vh;
				}
			}
		}

		& section#products {
			grid-template-columns: repeat(1, 95%);
			row-gap: 2vh;
		}
	}

	.payment-gateway {
		flex-direction: column;

		& .payment-breakdown,
		.customer-details {
			width: 100%;
		}

		& .customer-details {
			> div {
				width: 100%;
				padding: 1vh;

				&:first-child {
					margin-top: 2vh;
				}

				&:last-child {
					margin-bottom: 2vh;
				}
			}
		}

		& .payment-breakdown {
			& h3 {
				margin-top: 2vh;
			}

			& .table-of-items {
				> div {
					max-height: 38vh;
				}
			}

			& .final-results {
				margin-block: 2vh;
			}
		}
	}

	#mfa-setup {
		width: 90%;
		left: 5%;
	}

	/* ------------------ */
	/*   tab-layouts.js   */
	/* ------------------ */

	.tab-layouts {
		> .container {
			> .vessel {
				padding: 12px 16px;

				> div {
					> iframe {
						width: 100%;
						height: 240px;
					}
				}
			}
		}
	}
}