.desktop {
  display: none;
}

.tablet {
  display: none;
}

.mobile {
  display: none;
}

.smobile {
  display: none;
}

.contents-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
}

.contents {
  width: 95%;
  max-width: 1240px;
  overflow-x: hidden;
}

[data-theme="light-mode"] .bg-weather-card {
  background: linear-gradient(#d9dfed, #f5f5f5);
}

/* desktop */
@media (min-width: 992px) {
  .desktop {
    display: inherit !important;
  }

  .navbar {
    height: 70px;
  }

  .logo_img {
    height: 35px;
  }

  .navbar-item {
    font-size: 23px;
  }

  .contents {
    margin-top: 70px;
  }

  .flex-row-when-mobile {
    flex-direction: column !important;
  }

  .flex-column-when-mobile {
    flex-direction: row !important;
  }

  .flex-row-when-tablet {
    flex-direction: column !important;
  }

  .flex-column-when-tablet {
    flex-direction: row !important;
  }

  .bg-weather-card {
    height: 340px;
  }

  .topic-item-title {
    font-size: 1.7rem;
  }
}

/* tablet */
/* @media only screen and (max-width: 991px) and (min-width: 480px) { */
@media only screen and (max-width: 991px) and (min-width: 768px) {
  .tablet {
    display: inherit !important;
  }

  .navbar {
    height: 70px;
  }

  .logo_img {
    height: 35px;
  }

  .navbar-item {
    font-size: 23px;
  }

  .contents {
    margin-top: 70px;
  }

  .flex-row-when-mobile {
    flex-direction: column !important;
  }

  .flex-column-when-mobile {
    flex-direction: row !important;
  }

  .flex-row-when-tablet {
    flex-direction: row !important;
  }

  .flex-column-when-tablet {
    flex-direction: column !important;
  }

  .bg-weather-card {
    height: 250px;
  }

  .bg-weather-card {
    height: 250px;
  }

  .topic-item-title {
    font-size: 1.7rem;
  }
}

/* mobile */
/* @media only screen and (max-width: 479px) { */
@media only screen and (max-width: 767px) {
  .mobile {
    display: inherit !important;
  }

  .logo_img {
    height: 35px;
  }

  .navbar-item {
    font-size: 17px;
  }

  .contents {
    margin-top: 50px;
  }

  .flex-row-when-mobile {
    flex-direction: row !important;
  }

  .flex-column-when-mobile {
    flex-direction: column !important;
  }

  .flex-row-when-tablet {
    flex-direction: column !important;
  }

  .flex-column-when-tablet {
    flex-direction: row !important;
  }

  [data-theme="light-mode"] .bg-weather-item-in-card {
    box-shadow: rgba(149, 157, 165, 0.4) 0px 4px 12px;
  }

  .bg-weather-card {
    height: 340px;
  }

  .topic-item-title {
    font-size: 1.5rem;
  }

  .card-grid:nth-child(odd) {
    padding-right: 6px !important;
  }
  .card-grid:nth-child(2n) {
    padding-left: 6px !important;
  }

  .other-gases .card-content > div > div:nth-child(3) {
    border-right:1px dashed #d8d8d8;
  }
}

/* padding */
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  padding-left: 7.5px !important;
  padding-right: 7.5px !important;
}

/* nocard */
.nocard-title {
  padding-top: 30px;
  padding-left: 25px !important;
  padding-right: 25px !important;
}

/* mobile (갤럭시 폴드) */
@media only screen and (max-width: 319px) {
  /* xxs device */
  .col-xxs-1,
  .col-xxs-2,
  .col-xxs-3,
  .col-xxs-4,
  .col-xxs-5,
  .col-xxs-6,
  .col-xxs-7,
  .col-xxs-8,
  .col-xxs-9,
  .col-xxs-10,
  .col-xxs-11,
  .col-xxs-12 {
    float: left;
  }
  .col-xxs-1 { width: 8.33%; }
  .col-xxs-2 { width: 16.66%; }
  .col-xxs-3 { width: 25%; }
  .col-xxs-4 { width: 33.33%; }
  .col-xxs-5 { width: 41.66%; }
  .col-xxs-6 { width: 50%; }
  .col-xxs-7 { width: 58.33%; }
  .col-xxs-8 { width: 66.66%; }
  .col-xxs-9 { width: 75%; }
  .col-xxs-10 { width: 83.33%; }
  .col-xxs-11 { width: 91.66%; }
  .col-xxs-12 { width: 100%; }

  .smobile {
    display: inherit !important;
  }

  .none-display-when-smobile {
    display: none !important;
  }

  .flex-row-when-smobile {
    flex-direction: column !important;
  }

  .flex-column-when-smobile {
    flex-direction: row !important;
  }
}
.row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}