#intro {
    position: relative;
}

#message .flex {
    column-gap: 3rem;
    row-gap: 2rem;
}

#message .img-wrap {
    width: 40%;
    position: relative;
}

#message .img-wrap span {
    color: var(--c-opacity);
    font-size: clamp(4rem, 5vw, 7rem);
    writing-mode: vertical-rl;
    position: absolute;
    bottom: 0;
    left: -1rem;
}

#message .text-content {
    width: 60%;
}

#message .name {
    text-align: end;
    margin-top: 1rem;
}

#staff ul {
    flex-wrap: wrap;
    row-gap: 8rem;
}

#staff li {
    width: 30%;
}

#staff .img-wrap {
    position: relative;
    margin-bottom: 1rem;
}

#staff .img-wrap h3 {
    position: absolute;
    bottom: -.1rem;
    left: -.1rem;
    background-color: var(--c-bg);
    padding: 1rem;
}

.slider-container {
    width: 100vw;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

.slide-track {
    display: flex;
    padding: 0;
    margin: 0;
}

.slide-track li {
    flex: 0 0 auto;
    width: 25vw;
    list-style: none;
    padding-left: 1rem;
}

@media screen and (max-width:992px) {
    .slide-track li {
        width: 50vw;
    }
}

.slide-track img {
    width: 100%;
    height: auto;
    display: block;
}

@media screen and (max-width:992px) {
    #intro div div {
        text-align: start;
        max-width: fit-content;
        margin-inline: auto;
    }

    #message h2 {
        margin-bottom: 1em;
    }

    #message .img-wrap,
    #message .text-content {
        width: 100%;
    }

    #message strong {
        margin-bottom: 1rem;
    }

    #message .img-wrap span {
        left: -.5rem;
    }

    #staff ul {
        row-gap: 6rem;
    }

    #staff li {
        width: 100%;
    }

    #staff .img-wrap {
        margin-bottom: 1rem;
    }
}