@import '../../public/index.css';

.page {
  width: 100%;
  height: 100%;
  position: relative;
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  transition: 1s;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 40%, #fff 70%)
  }

  &.bg-1 {
    background-image: url(./assets/1-bg.jpg)
  }

  &.bg-2 {
    background-image: url(./assets/2-bg.jpg)
  }

  &.bg-3 {
    background-image: url(./assets/3-bg.jpg)
  }

  &.bg-4 {
    background-image: url(./assets/4-bg.jpg)
  }

  &.bg-5 {
    background-image: url(./assets/5-bg.jpg)
  }

  .main {
    width: 70vw;
    height: 70vh;
    overflow: auto;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: calc(20*var(--ratio));
    padding: calc(50*var(--ratio));
    margin: 0 auto 10vh;
    transform: translateY(20vh);
    text-align: center;

    &::-webkit-scrollbar {
      display: none;
    }

    .school {
      img {
        width: calc(80*var(--ratio));
        cursor: pointer;
        filter: grayscale(1);
        transition: all 300ms ease-in-out;

        &:hover {
          filter: none;
        }

        &.active {
          filter: none;
        }

        &+& {
          margin-left: calc(50*var(--ratio));
        }
      }
    }

    .content {
      margin-top: calc(20*var(--ratio));
      text-align: left;

      p:nth-child(1) {
        font-size: calc(35*var(--ratio));
        color: var(--homeRed);

        &::after {
          content: attr(after-data);
          font-size: calc(14*var(--ratio));
          margin-left: calc(10*var(--ratio));
          font-family: 'cabin';
        }
      }

      p:nth-child(2),
      p:nth-child(4) {
        font-size: calc(30*var(--ratio));
        color: #333;
        margin: calc(30*var(--ratio)) 0 calc(20*var(--ratio));

        &::before {
          display: block;
          content: '';
          width: 100%;
          height: calc(1.5*var(--ratio));
          background: #eee;
          margin-bottom: calc(30*var(--ratio));
        }

        &::after {
          color: #eee;
          margin-left: calc(20*var(--ratio));
          font-size: calc(20*var(--ratio));
          font-family: 'goldman';
        }
      }

      p:nth-child(2)::after {
        content: '- Construction Content';
      }

      p:nth-child(4)::after {
        content: '- Case Overview';
      }

      p:nth-child(3),
      p:nth-child(5) {
        font-size: calc(16*var(--ratio));
        color: #999;
        line-height: 2;
      }
    }
  }
}