@import url('https://fonts.googleapis.com/css?family=Open+Sans');
h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.7em;
    font-weight: 400;
    color: black;
    background-color: #fff;
    padding: 8px;
    padding-left: 16px;
    padding-right: 16px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 4px;
}

h2 {
    font-family: "Montserrat";
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.2em;
    letter-spacing: 1px;
    color: #91819b;
}

h3 {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 10px;
    font-size: 2em;
}

p {
    font-family: 'Open Sans';
    color: #91819b;
}

a {
    color: #91819b;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: #2752f1;
}

#showcase {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 20%;
}

#showcase img {
    width: 50px;
    height: 50px;
}

.underliner {
    height: 6px;
    width: 250px;
    background: #f3f3f3;
    margin: 15px 0;
}

.content-container {
    display: grid;
    margin: 0 15px;
    justify-content: center;
    grid-gap: 32px;
    margin-bottom: 72px;
}

.content-container img{
    display: block;
    width: 100%;
    height: auto;
}

.content-container .btn {
    margin-top: 8px;
}

.content-container .btn:hover {
    background:transparent;
    border:#0856a7 2px solid;
    color: #0856a7;
}

.card {
    width: 850px;
    transition: 0.3s;
    border-radius: 5px;
    display: grid;
    background-color: #f3f3f3;
    padding: 24px 32px;
    transition: 0.6s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); 
  }

.card h2 {
    margin-bottom: 16px;
}

/* Add rounded corners to the top left and the top right corner of the image 
.card img {
    border-radius: 5px 0 0 5px;
  }

.thumb img{
    width: 100%;
    height: auto;
}*/

.content {
    padding: 16px;
}

.description {
    padding: 8px;
    margin-top: 4px;
}

.card-top {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.card-img {
    padding-right: 32px;
}

/* Adjust single logos separetely */

/* ITEM 1 */
#item-1 .card-1-img img{
    margin-bottom: 32px;
    border-radius: 5px;
}

/* ITEM 4 */
#item-4 .card-img{
    padding:32px; 
    padding-right:64px;
}

/* ITEM 5 */
#item-5 .card-img{
    padding:16px; 
    padding-right:48px;
}


/* TABLET */

@media (max-width: 980px) {
    #showcase {
        padding: 32px;
        margin: 0;
    }
    .card {
        width: 100%;
    }

}

/* PHONE */

@media (max-width: 630px) {
    h1 {
        font-size: 2.2em;
        letter-spacing: 4px;
    }
    h3 {
        font-size: 1.8em;
        letter-spacing: 9px;
    }
    #showcase {
        min-height: 60vh;
    }
    
    #showcase h1{
        text-align: center;
    }

    .underliner {
        height: 6px;
        width: 80%;
        background: #f3f3f3;
        margin: 15px 0;
    }
    .card-top {
        grid-template-columns: 1fr;
    }

    /*center logos*/
    .card-img{
        padding-right: 0; 
        display: grid;
        justify-content: center;
    }

    /*set max size for images*/
    .card-img img{
        max-width: 320px; 
    }

    /* ITEM 3 */
    #item-3 .card-img{
        margin-bottom: 32px;
    }

    /* ITEM 4 */
    #item-4 .card-img{
        padding: 32px;
        padding-top: 0;
    }
    #item-4 .card-img img{
        max-width: 272px;
    }

    /* ITEM 5 */
    #item-5 .card-img{
        padding: 16px;
        padding-top: 0;
        margin-bottom: 16px;
    }
    #item-5 .card-img img{
        max-width: 288px;
    }

    /* ITEM 8 */
    #item-8 .card-img{
        margin-bottom: 32px;
    }

}