/* .page-styles *******************************/

.page-styles {
	position: relative;

  section {

	  .position {

	    .wrapper {
     		padding: 40px 20px;
				width: 100%;
			}
		}
	}
}

@media (min-width: 576px) {

  .page-styles {

	  section {

		  .position {
				align-items: center;
				display: flex;
				justify-content: center;

	    	.wrapper {
					max-width: 1600px;
      		padding: 80px 40px;
				}
			}
		}
  }
}

@media (min-width: 1600px) {

  .page-styles {

	  section {

		  .position {

	    	.wrapper {
					max-width: 1600px;
        }
      }
    }
  }
}

@media (min-width: 3000px) {

  .page-styles {

	  section {

		  .position {

	    	.wrapper {
					max-width: 3000px;
        }
      }
    }
  }
}

/* .page-styles section.hero *******************************/

.page-styles section.hero {
  background-image: url('../../../assets/images/styles/hero.webp');
  background-position: center;
 	background-repeat: no-repeat;
  background-size: cover;
	height: 100svh;

	.callout {
		background: rgba(0,0,0,0.8);
		color: #fff;
		margin: 0 auto;
		padding: 40px;
		width: 400px;

		h1 {
			font-size: 2rem;
		}
	}
}

@media (min-width: 576px) {

  .page-styles section.hero {

		.callout {
			position: absolute;
			right: 40px;
			top: 40px;
			width: 400px;
		}
  }
}

/* .page-styles section.guide *******************************/

.page-styles section.guide {
}

@media (min-width: 576px) {

  .page-styles section.guide {
  }
}

/* .page-styles section.responsive *******************************/

.page-styles section.responsive {
}

@media (min-width: 576px) {

  .page-styles section.responsive {
  }
}