.slide{
    height:550px;
    border-radius:5px;
    transition:0.5s height;
    max-width:95vw;
    margin:auto;
}
.slide:nth-of-type(even){
    background-color:yellow;
}

.slide {
    display:grid;
    display:-ms-grid;
    display:-moz-grid;
    grid-template-columns:50% 50%;
    grid-template-rows:auto;
}

@media (max-width:1024px){
    .slide{
        margin:auto auto;
    }
}

.slideImageContainer {
    width:100%;
    height: 500px;
    transition:0.5s height;
}
.singleImage{
    height:530px;
}
.slideImageContainer img, .singleImage img{
    width:100%;
    height:100%;
    object-fit:cover;
}
/* Responsive slideImageContainer and slide height */
@media (min-width:1012px) and (max-width:1200px){
    .slideImageContainer{
        height:450px;
    }
    .slide{
        height:500px;
    }
}
@media (min-width:950px) and (max-width:1012px){
    .slideImageContainer{
        height:420px;
    }
    .slide{
        height:470px;
    }
}
@media (min-width:934px) and (max-width:950px){
    .slideImageContainer{
        height:390px;
    }
    .slide{
        height:440px;
    }
}
@media (min-width:880px) and (max-width:934px){
    .slideImageContainer{
        height:390px;
    }
    .slide{
        height:440px;
    }
}
@media (min-width:816px) and (max-width:880px){
    .slideImageContainer{
        height:360px;
    }
    .slide{
        height:420px;
    }
}
@media(max-width:816px){
    .slideImageContainer{
        height:330px;
    }
    .slide{
        height:380px;
    }
}
/* Responsive imageOnlyContainer */
@media (min-width:1210px) and (max-width:1310px){
    .singleImage{
        height:550px;
    }
}
@media (min-width:1090px) and (max-width:1210px){
    .singleImage{
        height:500px;
    }
}
@media (min-width:960px) and (max-width:1090px){
    .singleImage{
        height:450px;
    }
}
@media (min-width:824px) and (max-width:960px){
    .singleImage{
        height:60vw;
    }
}
@media (min-width:660px) and (max-width:824px){
    .imageOnlyContainer{
        height:350px;
    }
}
@media (min-width:596px) and (max-width:660px){
    .singleImage{
        height:300px;
    }
}
@media (min-width:490px) and (max-width:596px){
    .singleImage{
        height:500px;
    }
}
@media (min-width:425px) and (max-width:490px){
    .singleImage{
        height:450px;
    }
}
@media (min-width:375px) and (max-width:425px){
    .singleImage{
        height:380px;
    }
}
@media (min-width:330px) and (max-width:375px){
    .singleImage{
        height:320px;
    }
}
@media (min-width:304px) and (max-width:330px){
    .singleImage{
        height:300px;
    }
}
@media (min-width:270px) and (max-width:304px){
    .singleImage{
        height:270px;
    }
}
@media (max-width:270px){
    .singleImage{
        height:250px;
    }
}
.slideContent{
    padding:3rem 2rem;
    position:relative;
    top:4rem;
    right:1rem;
    background-color:rgb(255, 255, 255);
    height:max-content;
    box-shadow:1px 1px 2px rgb(120, 120, 120);
    border-top:10px solid gold;
}

@media (max-width:880px){
    .slideContent{
        right:0.5rem;
    }
}

@media (min-width:600px) and (max-width:880px){
    .slide{
        max-width:98vw;
    }
}
@media (min-width:844px) and (max-width:1024px){
    .slideContent{
        top:2rem;
    }
}

@media (max-width:844px){
    .slideContent{
        top:0.5rem;
    }
}
.slideContent h1{
    padding-left:0.5rem;
    margin-bottom:1rem;
    font-size:1.8rem;
    border-left: 3px solid rgb(247, 114, 6);
    /* font-family:'Road Range', cursive; */
}

.slideContent > a{
    padding:0.8rem 2rem;
    background-color:rgb(19, 69, 235);
    color:white;
    display:inline-block;
    margin-top:2rem;
    border-radius:10px 0px 10px 0px;
}

.slideContent > p > a{
    color:rgb(19, 69, 235);
}

.slideContent > p > a:hover{
    text-decoration: underline;
}

.slideContent > a:hover{
    cursor:pointer;
    background-color:rgb(17, 59, 197);
}
@media (max-width:934px){
    .slideContent{
        padding:2rem 1rem;
    }
}
/* Styling for phones */
@media (max-width:600px){
    .slide{
        /* border:1px solid red; */
    }
    .slide{
        display:block;
        position:relative;
        height:100vh;
        border-radius:none;
    }
    .slideContent{
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        top:auto;
        background-color:transparent;
        border:none;
        color:white;
        background-image:linear-gradient(to top, black, rgba(0, 0, 0, 0));
    }
    .slideImageContainer{
        /* height:100vh; */
        /* height:max-slideContent; */
        padding:0rem;
        height:100%;
    }
    .slide{
        max-width:100vw;
        border-radius:0px;
    }
    .landing{
        margin-top:0rem;
    }
}

/* Styling for multiple images */
.multipleImage{
    width:330px;
    height:330px;
}
.multipleImage > img{
    width:100%;
    height:100%;
    object-fit:cover;
}
@media (min-width:1063px) and (max-width:1088px){
    .multipleImage{
        width:480px;
        height:480px;
    }
}

@media (min-width:995px) and (max-width:1063px){
    .multipleImage{
        width:450px;
        height:450px;
    }
}

@media (min-width:955px) and (max-width:995px){
    .multipleImage{
        width:430px;
        height:430px;
    }
}

@media (min-width:894px) and (max-width:995px){
    .multipleImage{
        width:400px;
        height:400px;
    }
}

@media (min-width:838px) and (max-width:894px){
    .multipleImage{
        width:370px;
        height:370px;
    }
}

@media (min-width:777px) and (max-width:838px){
    .multipleImage{
        width:340px;
        height:340px;
    }
}

@media (min-width:754px) and (max-width:777px){
    .multipleImage{
        width:330px;
        height:330px;
    }
}

@media (min-width:720px) and (max-width:754px){
    .multipleImage{
        width:310px;
        height:310px;
    }
}

@media (min-width:676px) and (max-width:720px){
    .multipleImage{
        width:290px;
        height:290px;
    }
}

@media (min-width:580px) and (max-width:676px){
    .multipleImage{
        width:260px;
        height:260px;
    }
}

@media (max-width:580px){
    .multipleImage{
        width:100%;
    }
}

@media (max-width:580px){
    .multipleImage{
        height:85vw;
    }
}