.trailer {
	border-bottom: 1px solid var(--border-neutral-secondary);
	margin-bottom: 4rem;
	padding: 1px 0;
}

.trailer-container {
	display: flex !important;
  	flex-flow: column wrap;
  	justify-content: center;
	padding: 0 0 4rem 0;;
	position: relative;
	min-height: 460px;
}

.trailer-container img {
	margin: 0 0 0 2rem;
	width: 50%;
	border-radius: var(--radius-base-4);
	position: absolute;
    right: 0;
    top: 0;
    height: calc(100% - 4rem);
    object-fit: cover;
}

.trailer-container h1 {
	margin: 2rem 0;
}

.trailer-content {
	max-width: 40%;
}



@media all and (min-width: 0px) {

	.trailer {
		margin-bottom: 1.5rem;
	}

	.trailer-container {
		min-height: unset;
		padding: 0 0 2.5rem 0;
	}

	.trailer-content {
		max-width: unset;
	}

	.trailer h2 {
		margin: 0;
	}

	.trailer-container img {
		float: none;
		margin: 2rem 0 0 0;
		width: 100%;
		position: static;
		height: auto;
	}
	
}


@media all and (min-width: 576px) {

	.trailer {
		margin-bottom: 1rem;
	}

	.trailer-container {
		min-height: unset;
		padding: 0 0 1rem 0;
	}

	.trailer-content {
		max-width: 45%;
	}
		
	.trailer-container img {
		float: none;
		margin: 0;
		position: absolute;
		right: 0;
		top: 0;
		height: calc(100% - 1rem);
		width: 50%;
	}
	
}


@media all and (min-width: 1024px) {

	.trailer {
		margin-bottom: 2rem;
	}
	
	.trailer-container {
		min-height: calc(380px + 3rem);
		padding: 0 0 2rem 0;
	}

	.trailer-content {
		max-width: 45%;
	}

	.trailer h2 {
		margin: 0;
	}
	
	.trailer-container img {
		float: none;
		margin: 0;
		position: absolute;
		right: 0;
		top: 0;
		height: calc(100% - 2rem);
		width: 50%;
	}
	
}


@media all and (min-width: 1440px) {

	.trailer {
		margin-bottom: 4rem;
	}
	
	.trailer-container {
		padding: 0 0 4rem 0;
		min-height: calc(460px + 6rem);
	}

	.trailer-content {
		max-width: 40%;
	}

	.trailer h2 {
		margin: 0 0 1.5rem 0;
	}

	.trailer-container img {
		float: none;
		margin: 0;
		position: absolute;
		right: 0;
		top: 0;
		height: calc(100% - 4rem);
		width: 50%;
	}
			
}