.fleet-host-logo img {
    width: 12rem;
    height: 12rem;
    margin-bottom: 2.4rem;
}

.fleet-info-location {
    margin-bottom: 1rem;
}

.fleet-info-box p {
    font-size: 2rem;
    color: white;
}

.fleet-description {
    margin-top: 2.6rem;
    border-bottom: 0.1rem solid var(--dark-grey-alt);
    padding-bottom: 2.8rem;
    margin-bottom: 2.8rem;
}

.fleet-host-info-btn {
    background: var(--dark-grey-alt);
    color: white;
    border-radius: 0.5rem;
    padding: 1.2rem 2rem;
    text-transform: uppercase;
    font-size: 1.6rem;
    display: inline-block;
    transition: background var(--transition-time-default);
}

.fleet-bg {
    background: url("../img/fleet-bg.jpg") center;
}

.fleet-host-info-btn:hover {
    background: var(--purple);
}

@media screen and (max-width: 767px) {
    .fleet-info, .fleet-description {
        border-top: 0.1rem solid var(--dark-grey-alt);
        padding-top: 2.8rem;
    }

    .fleet-host-logo, .fleet-info-location {
        text-align: center;
    }

    .fleet-info-box {
        margin-bottom: 2.4rem;
    }

    .host-about {
        margin-top: 2.4rem;
    }
}

@media screen and (min-width: 768px) {
    .fleet-page-wrap {
        display: flex;
        gap: 3rem;
        flex: 1;
    }

    .fleet-formup {
        display: flex;
        gap: 3rem
    }

    .fleet-host-logo {
        display: flex;
        flex-direction: column;
    }

    .fleet-host-logo img {
        order: 2;
        margin-top: 3rem;
    }

    .fleet-host-social {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .fleet-info {
        flex: 1;
    }

    .fleet-info-box.date {
        min-width: 12rem;
    }

    .fleet-formup-location {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media screen and (min-width: 1024px) {
    .fleet-page-wrap {
        gap: 4rem;
    }

    .fleet-formup {
        gap: 5rem;
    }
}