/* =========================
   TABLETS
========================= */

@media (max-width: 1024px) {
	:root {
		/* Layout */
  		--container-width: 1024px;
  	}

	.container {
		padding: 0 20px;
	}
	.hero {
		overflow: hidden;
	}
	.posters {
		gap: 8px;
	}
	.hero_left {
		margin-left: 0;
	}
	.hero_right {
		padding-right: 0;
	}
	.hero_wrapper {
		padding: 0 20px;
	}
}



/* =========================
   MOBILE LARGE
========================= */

@media (max-width: 768px) {
	:root {
		--h1-size: var(--fs-40);
  		--h2-size: var(--fs-32);
  		--h3-size: var(--fs-24);
  		--h4-size: var(--fs-20);

  		--text-md: var(--fs-16);
  		--text-lg: var(--fs-24);
  		--text-body: var(--fs-16);

  		--btn-text: var(--fs-16);
	}
	.hero {
		padding: 8px 0 32px 0
	}
	.hero_wrapper {
		gap: var(--spacing-64);
	}
	.logo {
		max-width: 110px;
	}
	.hero_left {
		gap: var(--spacing-20);
	}
	.hero-bg {
		display: none;
	}
	.mobile-hero-bg {
  		position: absolute;
  		top: 0;
  		left: 0;
  		z-index: -1;
  		display: block;
	}
	.stat_item {
		gap: var(--spacing-8);
		text-align: center;
	}
	.btn_container {
		flex-direction: column;
		gap: 8px;
		width: 100%;
	}
	.btn_container .u-btn {
		width: 100%;
	}
	.video-grid video {
		height: 100px;
		border-radius: var(--radius-md);
	}
	.video-grid video.is-web {
		display: none;
	}
	.gallery_overlay {
		display: block;
	}

	.plans_wrapper {
		grid-template-columns: repeat(1, 1fr);
	}
	.plan_item {
		padding: var(--spacing-20);
		gap: var(--spacing-20);
	}
	.benefits_wrap {
		padding: var(--spacing-20) 0;
	}
	.tag_discount .u-text {
		font-size: 12px;
	}

	.films {
		padding-top: var(--spacing-32);
	}
	.films h2 {
		margin-bottom: var(--spacing-40);
	}
	.section_wrapper {
		padding: var(--spacing-40) 0;
	}
	.tabs {
		margin-bottom: var(--spacing-20);
		gap: var(--spacing-8);
		justify-content: center;
	}
	.tab-content {
		margin-top: 0;
	}
	.tab {
		font-size: var(--fs-14);
		border: 1px solid rgba(255, 255, 255, 0.5);
	}
	.tab-panel {
		text-align: center;
	}
	.tab-text {
		font-size: var(--fs-14);
	}
	.posters {
		margin-top: var(--spacing-40);
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	.hero_wrapper {
		grid-template-columns: repeat(1, 1fr);
		gap: 80px;
	}
	.hero_left {
		align-items: center;
	}



	.footer .footer-top {
    	padding: 50px 0 70px;
	}
	.footer_wrapper {
    	grid-template-columns: 1fr;
    	gap: 40px;
	}
	.footer_right {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.footer_line {
		max-width: 100%;
	}
}