body{
    background-image: url('./assets/destination/background-destination-mobile.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
@media (min-width: 500px) {
    body{
        background-image: url('./assets/destination/background-destination-tablet.jpg');
        background-size: cover;
    }
}
@media (min-width: 1000px) {
    body{
        background-image: url('./assets/destination/background-destination-desktop.jpg');
        background-size: cover;
    }  
}

/* HEADING */

div.planets{
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 20px auto;
}
div.planet_img > img{
    width: 100%;
    height: auto;
}
div.planet_links{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}
div.planet_link{
    color: #fff;
    display: inline-flex;
    padding: 10px 0;
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
}
div.planet_link:hover{
    border-bottom: 2.5px solid #ccc;
}
div.planet_heading{
    text-align: left;
    text-transform: uppercase;
}
h1.heading{
    font-size: 80px;
    color: #fff;
}
div.planet_info{
    color: #fff;
    text-align: left;
}
div.planet_description{
    padding: 30px 0;
    border-bottom: 1px solid #ccc;
}
div.distance_time{
    display: flex;
    flex-direction: column;
    text-align: left;
}
div.distance, div.time{
    margin-top: 20px;
}
div.distance > p, div.time > p{
    margin-bottom: 10px;
}
p.para{
    font-size: 30px;
}
@media (min-width:900px) {
    body{
        height: 100vh;
    }
    div.planets{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    div.planet_info{
        width: 48%;
        margin-bottom: 0;
    }
    div.planet_img{
        width: 30%;
    }
    div.distance_time{
        flex-direction: row;
        align-items: center;
    }
    div.time{
        margin-left: 20px;
    }
}
div.active{
    border-bottom: 2.5px solid #ccc;
}