.iphone-container {
	position: absolute;
	width: 250rem;
	right: calc(14vw - 20px);
	z-index: 1;
	top: 370rem;
	perspective: 1300rem;
	perspective-origin: 250% 100%;
}

.iphone-frame {
	background: url("./../../../../img/Rectangle (7/index.html).png");
	background-repeat: no-repeat;
	background-size: 248px;
	transform: rotateX(3deg) rotateY(-3deg);
}



.iphone-wrapper {
    clip-path: url(#iphone);
    padding-left: 18px;
    padding-top: 14px;
}

.iphone-wrapper img {
	width: 209rem;
	height: 467rem;
}

.macbook-wrapper {
	position: relative;
	text-align: center;
}

.macbook {
	width: 71.1%;
	height: auto;
	margin: 0 auto;
}

.macbook-content {
	position: absolute;
	left: 50%;
	top: 5%;
	max-width: 51.6%;
	height: 76.6%;
	object-fit: cover;
	transform: translateX(calc(-50% - 2px));
}

.macbook-wrapper:after {
	content: '';
	position: absolute;
	left: 30rem;
	top: 55%;
	background: white;
	width: 6rem;
	height: 50rem;
	border-radius: 30rem;
	animation: scroll;
	animation-iteration-count: infinite;
	animation-duration: 1600ms;
}

.macbook-wrapper:before {
	content: '';
	position: absolute;
	left: 30rem;
	top: 55%;
	width: 6rem;
	height: 100rem;
	background: #818181;
	border-radius: 30rem;
}

.gb-worksingleheader:before {
	content: 'MORE';
	position: absolute;
	left: 10rem;
	transform: rotate(90deg);
	color: white;
	top: calc(50% - 70rem);
}

@media (max-width: 900px) {
	.iphone-container {
    transform: scale(0.7);
    top: 0%;f.
    right: 0%;
	}
}

@media (min-width: 2000px) {
    .iphone-frame {
        transform: rotateX(3deg) rotateY(-3deg) scale(2) translate(-120px, 80px);
    }
    
    .wp-block-image.size-full img {
        width: 100%;
    }
}

@media (min-width: 3500px) {
    .iphone-wrapper img {
        width: 79rem;
        height: 175rem;
    }
}