/*
    HERO
*/

section.pOne, section.pTwo, section.pThree { position: relative; }
section.pOne > div, section.pTwo > div, section.pThree > div { position: relative; margin-bottom: 1rem; background-color: rgb(245, 245, 245); }

section.pOne *, section.pTwo * { position: relative; }
section.pOne > div > div p, section.pTwo > div > div p, section.pThree > div > div p { text-transform: uppercase; font-weight: bold; letter-spacing: 0.15em; margin-bottom: 2rem; }

@media screen and (max-width: 767px) {
	section.pOne > div, section.pTwo > div, section.pThree > div { margin-bottom: 1rem; padding-bottom: 2rem; }
	section.pOne > div > a img, section.pTwo > div > a img, section.pThree > div > a img { width: 100vw; height: 100vw; }
	section.pOne > div > div, section.pTwo > div > div, section.pThree > div > div { margin-top: 2rem; }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	section.pOne > div > * { display: inline-block; vertical-align: middle; width: calc(100vw / 2); }
	section.pOne > div > a img { width: calc(100vw / 2); height: calc(100vw / 2); }
	section.pOne > div > div { top: 50%; transform: translateY(50%); }
	
	section.pTwo > div { display: inline-block; }
	section.pTwo > div { width: calc(100vw / 2 - 0.5rem); }
	section.pTwo > div:nth-child(1) { left: -0.5rem; }
	section.pTwo > div:nth-child(2) { left: 0.5rem; }
	section.pTwo > div > a img { width: calc(100vw / 2 - 0.5rem); height: calc(100vw / 2 - 0.5rem); }
	section.pTwo > div > div { margin: 2rem 0; }
	
	section.pThree > div { display: inline-block; }
	section.pThree > div:nth-child(1), section.pThree > div:nth-child(2) { width: calc(100vw / 2 - 0.5rem); }
	section.pThree > div:nth-child(1) { left: -0.5rem; }
	section.pThree > div:nth-child(2) { left: 0.5rem; }
	section.pThree > div:nth-child(1) > a img, section.pThree > div:nth-child(2) > a img { width: calc(100vw / 2 - 0.5rem); height: calc(100vw / 2 - 0.5rem); }
	section.pThree > div:nth-child(3) { width: calc(100vw / 2); }
	section.pThree > div:nth-child(3) > a img { width: calc(100vw / 2); height: calc(100vw / 2); }
	section.pThree > div:nth-child(3)::before, section.pThree > div:nth-child(3)::after { position: absolute; top: 0; display: block; background-color: rgb(245, 245, 245); width: calc((100vw - 100vw / 2 - 2rem) / 2); height: 100%; content: " "; }
	section.pThree > div:nth-child(3)::before { right: calc(100vw / 2 + 1rem); }
	section.pThree > div:nth-child(3)::after { left: calc(100vw / 2 + 1rem); }
	section.pThree > div > div { margin: 2rem 0; }
}

@media screen and (min-width: 1024px) {
	section.pOne > div { width: 100vw; padding: 0 calc(100vw / 3 / 3); }
	
	section.pOne > div > * { display: inline-block; vertical-align: middle; width: calc(100vw / 3); height: calc(100vw / 3); }
	section.pOne > div > a img { width: calc(100vw / 3); height: calc(100vw / 3); }
	section.pOne > div > div { margin-left: calc(100vw / 3 / 3); top: 50%; transform: translateY(50%); }
	
	section.pTwo > div { display: inline-block; }
	section.pTwo > div { width: calc(100vw / 3); }
	section.pTwo > div:nth-child(1) { left: -0.5rem; }
	section.pTwo > div:nth-child(2) { left: 0.5rem; }
	section.pTwo > div > a img { width: calc(100vw / 3); height: calc(100vw / 3); }
	section.pTwo > div > div { margin: 2rem 0; }
	section.pTwo::before, section.pTwo::after { position: absolute; top: 0; display: block; background-color: rgb(245, 245, 245); width: calc((100vw - 100vw / 3 * 2 - 3rem) / 2); height: calc(100% - 1rem); content: " "; }
	section.pTwo::before { left: 0; }
	section.pTwo::after { right: 0; }
	
	section.pThree > div { display: inline-block; }
	section.pThree > div { width: calc((100vw - 2rem) / 3); }
	section.pThree > div:nth-child(1) { left: -1rem; }
	section.pThree > div:nth-child(3) { left: 1rem; }
	section.pThree > div > a img { width: calc((100vw - 2rem) / 3); height: calc((100vw - 2rem) / 3); }
	section.pThree > div > div { margin: 2rem 0; }
}