#section-genre,
#section-situation {
  position: relative;

  width: calc(100% + 48px);
  height: calc(100% + 48px);
  margin: -24px;
}
#section-genre::before,
#section-situation::before {
  content: '';

  position: absolute;
  left: 33.33%;
  top: 0;

  width: 1px;
  height: 100%;

  background-color: #787878;
}
#section-genre::after,
#section-situation::after {
  content: '';

  position: absolute;
  left: 66.66%;
  top: 0;

  width: 1px;
  height: 100%;

  background-color: #787878;
}

.explore__category-list-container {
  display: flex;
  flex-wrap: wrap;

  max-height: 100%;

  padding-top: 16px;
  padding-bottom: 16px;

  overflow: auto;
}

.explore__category-list-container-item {
  width: 33.33%;
  display: flex;
  align-items: center;

  height: 80px;
  padding: 16px;
  margin-bottom: 8px;

  font-size: 32px;
}

@media (max-height: 455px) {
  .explore__category-list-container {
    padding: 0;
  }
  .explore__category-list-container-item {
    height: 85px;
    margin-bottom: 0px;

    font-size: 27px;
  }
}
@media (max-height: 423px) {
  #section-genre,
  #section-situation {
    width: calc(100% + 16px * 2);
    max-height: calc(100% + 16px * 2);

    margin: calc(16px * -1);
  }

  .explore__category-list-container-item {
    height: 58px;

    font-size: 20px;
  }
}

@media (max-height: 289px) {
  .explore__category-list-container-item {
    height: 53px;
    margin-bottom: 0px;
  }
}
@media (max-height: 265px) {
  .explore__category-list-container-item {
    height: 48px;
  }
}

@media (max-height: 239px) {
  .explore__category-list-container-item {
    height: 35px;
    margin-bottom: 8px;
    padding: 0 16px;

    font-size: 16px;
  }
}