.life-detail {
  position: relative;
  display: grid;
  grid-template-rows: 40px 1fr;
  align-items: center;

  .title {
    text-align: center;
    font-weight: bold;
    font-size: 1.4rem;
  }

  section {
    .info-container, .record-container {
      .info-item {
        padding: 1vh 1vw;
        display: flex;
        flex-direction: column;
        gap: 1vh;

        .title-info {
          display: flex;
          align-items: center;
          gap: 5px;

          svg {
            height: 1.4em;
            width: 1.4em;
          }

          .sub-title {
            font-size: large;
            font-weight: bold;
          }
        }

        .info {
          margin-left: 2vw;
        }
      }
    }

    .info-container {
      display: flex;
      flex-direction: column;
      gap: 10px;

      .food-basic-info {
        display: flex;
        gap: 1vh;
      }

      .travel-basic-info {
        display: flex;
        flex-direction: column;
        gap: 1vh;

        .basic-item {
          display: flex;
          flex-direction: column;
          gap: 1vh;

          .basic-title {
            font-weight: bold;
          }

          .basic-content {
            margin-left: 1vw;
            display: flex;
            gap: 1vh;
          }
        }
      }

      .material-info {
        display: flex;
        flex-direction: column;
        gap: 1vh;

        .material-item {
          display: flex;
          flex-direction: column;
          gap: 1vh;

          .material-title {
            font-weight: bold;
          }

          .material-content {
            margin-left: 1vw;
            display: flex;
            gap: 1vh;
          }
        }
      }

      .step-info {
        margin-left: 1vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1vh;
        min-height: 28vh;

        .step-container {
          display: grid;
          grid-template-columns: 50px 1fr;
          gap: 1vw;

          .step-body {
            display: flex;
            flex-direction: column;
            gap: 1vh;

            .step-content {
              font-weight: bold;
            }

            .step-image {
              height: 100%;
              width: 100%;

              max-height: 300px;
              max-width: 300px;
            }
          }
        }

      }

      .others-info {
        margin-left: 1vw;
        display: flex;
        gap: 1vw;

        .others-title {
          font-weight: bold;
        }
      }

      .guide-info {
        display: flex;
        flex-direction: column;
        gap: 1vh;

        .guide-item {
          display: flex;
          flex-direction: column;
          gap: 1vh;

          .guide-title {
            font-weight: bold;
          }

          .guide-content {
            min-height: 6vh;
            margin-left: 1vw;
            display: flex;
            gap: 1vh;
          }
        }
      }
    }

    .info-container .info-item:last-child {
      flex-grow: 1;
    }

    .record-container {
      overflow: auto;
      display: flex;
      flex-direction: column;
      gap: 2vh;

      .record-info {
        .el-timeline {
          .el-timeline-item__wrapper {
            .el-timeline-item__timestamp {
              color: #000000;
              font-weight: bold;
            }
          }
        }

        .record-card {
          .el-card__body {
            display: grid;
            grid-template-rows: 20px 250px;
            gap: 10px;

            .record-content {
              font-weight: bold;
            }

            .el-carousel {
              .el-carousel__container {
                height: 100%;
              }
            }
          }
        }
      }
    }
  }

  .back-button {
    position: absolute;
    top: 0;
    left: 0;
  }
}

@media screen and (min-width: 768px) {
  .life-detail {
    section {
      height: calc(100vh - 40px - 40px - 4vh);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
  }
}

@media screen and (max-width: 768px) {
  .life-detail {
    section {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  }
}