img {
    width: 100%;
    line-height: 0;
}

.banner {
    width: 100%;
    height: fit-content;
}

.unit {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 1vw;
    padding-block: 1vw;
}

.unit span {
    white-space: nowrap;
    font-size: 1.1rem;
}

.theme {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 10vw;
    flex-wrap: wrap;
    background-color: #fff6dc;
    min-height: 6vw;
    padding-block: 4vh;
    font-size: 2rem;
    font-weight: bold;
}

.theme>a.btn {
    width: 15vw;
    margin: 0;
}

.theme>h1,
.theme>h2 {
    width: 100vw;
    font-size: 1.5rem;
    font-weight: bold;
    white-space: nowrap;
    text-align: center;
}

.theme>h1 {
    font-weight: 100;
}

footer {
    width: 100%;
    height: 15vw;
    background-color: #0892f1;
    position: relative;
    bottom: 0;
}

@media screen and (max-width: 768px) {
    .theme {
        font-size: 5vw;
    }

    .theme>a.btn {
        width: 27vw;
        margin: 0 5vw;
    }

    .theme>h1,
    .theme>h2 {
        font-size: 2.5vw;
    }

    .unit span {
        font-size: 2.5vw;
    }
}