/* declare class variables */
:root{
	/* colors */
	--clr-gray: #f3f3f3;
	--clr-white: #fff;
	--clr-dark: #181818;
	--clr-dark-gray: #e7e7e7;
    --clr-light-blue: #2FB4EA;

	/* 68px */
	--fs-900: 4.25rem;
	/* 60px */
	--fs-800: clamp(2rem, 7vw, 2.8rem);
    /* 46px */
    --fs-710: clamp(1.5rem, 4vw, 2.875rem);
	/* 44px */
	--fs-700: clamp(1.4rem, 6vw, 2.75rem);
    /* 38px */
    --fs-670: clamp(1.35rem, 6vw, 2.375rem);
	/* 30px */
	--fs-650: clamp(1.3rem, 5vw, 1.875rem);
	/* 24px */
	--fs-600: clamp(1rem, 3vw, 1.3rem);
	/* 20px */
	--fs-500: clamp(0.9rem, 2.9vw, 1.25rem);
	/* 18px */
	--fs-400: clamp(0.8rem, 2.8vw, 1.125rem);
	/* 15px */
	--fs-300: clamp(0.7rem, 2.7vw, 1rem);
	/* 14px */
	--fs-200: clamp(0.6rem, 2.6vw, 0.9rem);

	/* container margin */
	/* 280px */
	--container-margin-big: 12rem;
	/* 80px */
	--container-margin-small: 5rem;

	--container-margin-start: 1rem;

    /* 14px */
    --small-margin: 0.875rem;
}

@media (min-width: 769px){
	:root{
		--container-margin-start: 10rem;
	}
}

@media (min-width: 1150px) {
	:root {
		--fs-800: min(3.75rem, 5vw);
		--fs-700: min(3rem, 3vw);
		--fs-600: min(1.5rem, 2vw);
		--fs-500: 1.25rem;
		--fs-400: min(1rem, 1.3vw);
		--fs-300: 0.9375rem;
		--fs-200: 0.875rem;
		--container-margin-big: 17.5rem;
	}
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

/* custom font class */
.ff-spoga-neo{font-family: "Spoga Han Sans Neo", "NanumGothic", sans-serif;}

/* font-size utility classes */
.fs-900{ font-size: var(--fs-900); }
.fs-800{ font-size: var(--fs-800); }
.fs-710{ font-size: var(--fs-710); }
.fs-700{ font-size: var(--fs-700); }
.fs-670{ font-size: var(--fs-670); }
.fs-650{ font-size: var(--fs-650); }
.fs-600{ font-size: var(--fs-600); }
.fs-500{ font-size: var(--fs-500); }
.fs-400{ font-size: var(--fs-400); }
.fs-300{ font-size: var(--fs-300); }

.fw-light { font-weight: 400; }
.fw-normal { font-weight: 400; }
.fw-medium { font-weight: 500 }
.fw-medium-bold { font-weight: 600 }
.fw-bold { font-weight: 700; }

.center-text{ 
	text-align: center;
	margin-inline: auto;
}

.max-character {
    max-width: var(--char-width, 52ch);
}

/* margins used frequently */
.page-margin-end-big {
	margin-block-end: var(--container-margin-big);
}

.page-margin-end-small {
	margin-block-end: var(--container-margin-small);
}

.page-margin-block-start {
	margin-block-start: var(--container-margin-start);
}

.element-small-margin {
    margin-bottom: var(--small-margin);
}

.text-white { color: var(--clr-white); }
.text-light-blue { color: var(--clr-light-blue) }

.bg-gray { background-color: var(--clr-gray); }
.bg-dark { background-color: var(--clr-dark); }
.bg-dark-gray { background-color: var(--clr-dark-gray); }

.resize-image{
	object-fit: contain;
	width: 100%;
	height: auto;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}

.fti.motion_left {
	animation: left_to_right 1s ease-in;
	animation-fill-mode: forwards;
	transform: translateX(-20%);
	opacity: 0;
  }


@keyframes left_to_right {
	0% {
		transform: translateX(-20%);
		opacity: 0;
	}

	100% {
		transform: translateX(0%);
		opacity: 1;
	}
}

.fti.motion_right {
	animation: right_to_left 1s ease-in;
	animation-fill-mode: forwards;
	transform: translateX(10%);
	opacity: 0;
  }


@keyframes right_to_left {
	0% {
		transform: translateX(10%);
		opacity: 0;
	}

	100% {
		transform: translateX(0%);
		opacity: 1;
	}
}

.fti.flex-div {
	display: flex; 
	flex-direction: row; 
	margin-top: 20px;
	width: 100%;
}

.fti.left-div {
	flex: 1; 
	width: 100%; 
}

.fti.right-div {
	flex: 1;
	width: 100%; 
}

.img_center {
	display: block;
	margin-left: auto; 
	margin-right: auto;
}

/* Home page styling */
.page-first-container{
	margin-top: 20px;
	margin-bottom: 20px;
	padding-block-start: 50px;
	padding-block-end: 20px;
	background-color: rgba(242, 242, 242, 1.0);
}

.page-first-container h1,
.page-first-container h2,
.page-first-container p {
    letter-spacing: -0.065rem;
    word-break: keep-all;
}

.grid{
	display: grid;
	width: 100%;
	gap: var(--grid-gap);
}

.grid > * {
	width: 100%;
	position: relative;
}

@media (min-width: 768px){
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.my-container {
	margin-block: 1rem;
	padding-inline: 0.5rem;
}

.front-images{
	object-fit: contain;
	width: 100%;
	height: auto;
}

.spoga-font-bold {
	font-family: "Spoga Han Sans Neo", "Nanum Gothic", sans-serif;
	font-size: min(10vw, 3.4375rem);
	font-weight: 700;
	text-align: center;
	margin-inline: auto;
}

.spoga-font-medium {
	font-family: "Spoga Han Sans Neo", "Nanum Gothic", sans-serif;
	font-size: 1.375em;
	font-weight: bold;
	text-align: center;
	margin-inline: auto;
	margin-block-end: min(7vh, 4rem);
}

.image-resize {
	max-width: 100%;
	height: auto;
}

.image-description {
	font-family: "Spoga Han Sans Neo", "Nanum Gothic", sans-serif;
	position: absolute;
	margin-inline: auto;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 1;
}

.home-images {
	padding: 1.625rem;
	background-color: #fff !important;
}

.home-images > *:nth-child(1) .image-description {
	top: 8%;
	color: white;
}

.home-images > *:nth-child(2) .image-description {
	top: 35%;
	color: black;
}

.home-images > *:nth-child(3) .image-description {
	top: 18%;
	color: black;
}

.home-images > *:nth-child(4) .image-description {
	top: 15%;
	color: white;
}



.home-images .image-description > p {
	margin-block: clamp(-0.5rem, -1vh, -1.2rem);
}

.home-images .image-description > p:nth-child(1) {
	font-size: clamp(0rem, 5vw, 6rem);
}

.home-images .image-description > p:nth-child(2) {
	font-size: clamp(0rem, 7vw, 8rem);
}

.home-images .image-description > p:nth-child(3) {
	font-size: clamp(0rem, 4vw, 4rem);
}

@media (min-width: 768px) {
	.home-images .image-description > p {
		margin-block: min(-0.5rem, -1.5vh);
	}
	
	.home-images .image-description > p:nth-child(1) {
		font-size: clamp(1rem, 3vw, 5rem);
	}
	
	.home-images .image-description > p:nth-child(2) {
		font-size: clamp(2rem, 4vw, 7rem);
	}
	
	.home-images .image-description > p:nth-child(3) {
		font-size: clamp(0.7rem, 2vw, 3rem);
	}
}

.home-images .image-description span {
	font-weight: 700;
}

/* --------------------------- */
/* -----Other Page Styles----- */
/* --------------------------- */

/* container */
.page-container {
	--max-width: 1396px;
	--padding: 1rem;

	margin-top: 5rem;
	width: min(var(--max-width), 100% - (var(--padding) * 2));
	min-height: 100vh;
	min-width: 22.5rem;
	margin-inline: auto;
}

.page-container h1,
.page-container h2,
.page-container p,
.page-container td {
    letter-spacing: -0.065rem;
    word-break: keep-all;
}

.single-column {
	display: grid;
	padding-inline: 7%;
	padding-block-start: 2rem;
	padding-block-end: 1rem;
}

.single-column .resize-image {
	padding-inline: 10%;
	padding-block-start: 1rem;
}

.even-columns {
	display: grid;
	padding-inline: 7%;
	padding-block: 1.375rem;
}

.even-columns img {
	margin-inline: auto;
}

.even-columns-description {
	display: grid;
	align-content: center;
}

.even-columns-description > * {
	margin: 0 auto;
}

.product-card,
.reverse-product-card {
	display: grid;
	grid-template-areas: 
		'image'
		'description'
	;
	gap: 2rem;
}

.product-description{
	margin-inline: auto;
	display: grid;
	align-content: center;
	justify-items: center;
}

.product-image-container {
	background-color: var(--clr-gray);
	grid-area: image;
}

.reverse-image-container {
	background-color: var(--clr-dark);
	grid-area: image;
}

.product-image, .reverse-image {
	margin-inline: auto;
	height: auto;
}

.product-description {
	grid-area: description;
}

.product-description > * {
	margin-inline-start: min(5rem, 7vw);
	margin-inline: auto;
	text-align: center;
}

.product-description > img {
	width: 40%;
	max-width: 12.5rem;
	margin-block-end: 1.5rem;
}

.product-description > h2 {
	margin-block-end: 1.25rem;
}

.product-description > p {
	margin-block-end: min(4rem, 7vw);
	max-width: var(--char-width);
}


.product-button {
	background-color: hsl(198, 100%, 41%);
	display: block;
	color: hsl(0, 0%, 100%);
	border: 0;
	border-radius: 0.625rem;
	padding: 0.8125rem 3.5rem;
	cursor: pointer;
}

.product-button:is(:hover, :focus) {
	background-color: hsl(198, 100%, 60%);
}

.product-spec {
	display: grid;
	justify-content: center;
}

.product-spec td {
	vertical-align: top;
	padding-block: min(2.25rem, 2vw);
}

.product-spec td:first-child {
	font-size: var(--fs-500);
	font-weight: 700;
	white-space: nowrap;
	width: 20%;
	min-width: 4.8rem;
}

.product-spec td:nth-child(2) {
	font-size: var(--fs-300);
	font-weight: 400;
	max-width: 52ch;
	padding-inline-start: 1rem;
}

.product-spec span {
	font-size: var(--fs-200);
	font-weight: 400;
	color: #b3b3b3;
}

.resize-container {
    background-image: var(--background-image);
    background-size: cover;
    background-repeat: no-repeat;
    display: grid;
    justify-content: right;
    align-content: center;
    padding-inline-start: 30%;
    padding-inline-end: 10%;
}

.about-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-block-end: 6rem;
    row-gap: 3rem;
}

.about-container > * {
    margin-inline: 7%;
}

.about-container__title {
    grid-template-areas:
        'title title title'
    ;
    margin-block-start: 2rem;
}

.about-title{
    grid-area: title;
    /* text-align: center; */
}

.about-container__content {
    grid-template-areas:
        'subtitle subtitle subtitle'
        'article article article'
        'image image image'
   ;
}

.about-subtitle {
    grid-area: subtitle;
}

.about-article {
    grid-area: article;
}

.about-image {
    grid-area: image;
    width: 86%;
    /* margin: 0 auto; */
}

@media (min-width: 768px) {
    .about-container__title {
        margin-block-start: 14rem;
    }
}

@media (min-width: 1150px){
	
	.single-column {
		padding-block-start: 8.75rem;
		padding-block-end: 3.9rem;
	}
	.page-container {
		--padding: 3rem;
	}

	.even-columns {
		grid-template-columns: repeat(2, 1fr);
	}

	.even-columns > * {
		justify-content: center;
	}

	.even-columns > .even-columns-description > * {
		margin: 0;
	}
	.product-card {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas: 
			'image description'
		;
		gap: 0;
	}
	.reverse-product-card {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas: 
			'description image'
		;
		gap: 0;
	}
	.product-description{
		margin-inline: 20%;
		justify-items: left;
	}

	.product-image-container {
		background-color: transparent;
	}

	.product-image {
		margin: 0;
	}

	.product-card .reverse-image {
		margin-left: auto;
	}

	.product-description > * {
		margin-inline: 0;
		text-align: left;
	}

	.product-spec {
		grid-template-columns: repeat(2, 40%);
		justify-content: space-between;
	}

    .about-container__title {
        grid-template-areas:
            '. title title'
        ;
        margin-block-start: 17rem;
    }

    .about-container__content {
        grid-template-areas:
           'subtitle article article'
           '. image image'
       ;
    }

    .about-title {
        text-align: left;
    }

    .about-subtitle {
        text-align: center;
    }
}