@layer reset, var, header, footer, contents-header;

@import url('config.css');
@import url('article.css') layer(contents-header);

.page-wrapper {
  overflow: hidden;  
} /* end of .page-wrapper */

.index {
  width: 100%;
  height: 18.75rem;
  background-image: url('../css/img/olympic.jpg');
  background-position: center;
  background-size: cover;
  padding-top: 17.275rem;
} /* end of .index */

.index .spotNav {
  width: 17rem;
  background-color: #000;
  padding: 0 10px;
} /* end of .index .spotNav */

.index .spotNav span {
  color: var(--bg-color5);
  font-weight: 600;
  font-size: var(--font-size5);
} /* end of .index .spotNav span */

.olympic {
  padding-top: 3.75rem;
  margin-bottom: 12rem;
} /* end of .terms */ 

.olympic .container .item1 {
  margin-top: 5.25rem;  
  display: grid;
  grid-template-columns: 30% 70%;
} /* end of .olympic .container .item1 */

.olympic .container .item1 .text {
  padding-left: 4rem;
} /* end of .olympic .container .item1 .text */

.olympic .container .item1 .text p {
  margin-top: 1.7rem;
  font-size: 1.3rem;
} /* end of .olympic .container .item1 .text p */

.olympic .container .item2 {
  margin-top: 5rem;
} /* end of .olypic .container .item2 */

.olympic .container .item2 p {
  font-size: 1.3rem;
  margin-top: 1.7rem;
} /* end of .olympic .container .item2 p */

.olympic .container .item2 p i {
  color: var(--color-primary);
} /* end of .olympic .container .item2 p i */

.olympic .container .item3 {
  margin-top: 7rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
} /* end of .olympic .container .item3 */

.olympic .container .item3 div {
  background-color: var(--color-primary);
  padding: 4rem 2rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  border-radius:1rem;
  transition: background-color 0.6s;
} /* end of .olympic .container .item3 > div */

.olympic .container .item3 div:hover {
  background-color: var(--color-secondary);
} /* end of .olympic .container .item3 div:hover */

.olympic .container .item3 div i {
  font-size: 3.5rem;
} /* end of .olympic .container .item3 > div i */

.olympic .container .item3 div p {
  margin-top: 3rem;
} /* end of .olympic .container .item3 div p */

.olympic .container .item4 {
  margin-top: 5rem;
} /* end of .olympic .container .item4 */

.olympic .container .item4 p {
  font-size: 1.3rem;
  margin-top: 1.7rem;
} /* end of .olympic .container .item4 p */

/* ========== Responsive ========== */
/* 테블릿 가로 */
@media (max-width: 992px) {
  .container {
    padding: 0 0.9375rem;
  } /* end of .container */
}

/* 테블릿 세로 */ 
@media (max-width: 768px) {
  .olympic .container .item1 {
    grid-template-columns: 1fr;
  }

  :is(.olympic .container .item1 .text) :is(h2, p) {
    font-size: 0.8rem;
  } /* end of .olympic .container .item1 .text) :is(h2, p) */

  :is(.olympic .container) :is(.item2, .item3, .item4) :is(h2, p) {
    font-size: 0.8rem;
  } /* end of . */

  .olympic .container .item1 .text {
    padding-left: 0;
    margin-top: 3rem;
  } /* end of .olympic .container .item1 .text */
}