.polaroid-container {
    display: flex; /* primary flex container */
    flex-direction: row; /* horizontal alignment of flex items
                                      (default value; can be omitted) */
    align-items: stretch; /* will apply equal heights to flex items  (default value; can be omitted) */
    height: 100%;
}

div.polaroid {
    max-width: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    display: inline-block;
    margin: 15px;
    position: relative;
    cursor: pointer;
    flex: 1;
}

    div.polaroid .polaroid-border {
        height: 20px;
        width: 100%;
        background-color: #0069A1;
    }

    div.polaroid .image-container {
        height: 250px;
        position: relative;
    }

        div.polaroid .image-container .polaroid-image {
            height: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50% 50%;
        }

        div.polaroid .image-container .image-overlay {
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            background-color: #0069A1;
            opacity: 0.3;
        }

    div.polaroid:hover .image-container .image-overlay {
        opacity: 0 !important;
    }

    div.polaroid .content {
        background: #fff;
        padding: 1rem 1.5rem 1.5rem 1.5rem;
        margin: 0 0 1.8rem 0;
        display: flex;
        flex-direction: column;
    }

        div.polaroid .content h2 {
            font-family: 'Poppins-Bold';
            color: #393a3a;
            font-size: 1.4rem;
            margin-bottom: 0;
        }

        div.polaroid .content .polaroid-description {
            margin-bottom: 1rem;
        }

            div.polaroid .content .polaroid-description,
            div.polaroid .content .polaroid-description span,
            div.polaroid .content .polaroid-description p {
                font-family: 'Poppins-Regular';
                color: #000000;
                line-height: 20px;
            }

    div.polaroid a.button {
        display: inline-block;
        border-radius: 1px;
        background-color: #003DA5;
        border: none;
        color: #FFFFFF;
        text-align: center;
        font-size: 14px;
        padding: 10px;
        width: 100%;
        transition: all 0.5s;
        cursor: pointer;
        margin: 0px;
        box-shadow: 0px 5px 20px grey;
        text-transform: uppercase;
        position: absolute;
        bottom: 0;
        left: 0;
    }

        div.polaroid a.button span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
            padding-right: 1rem;
        }

        div.polaroid a.button:hover {
            background-color: #0069A1;
            text-decoration: none;
        }

        div.polaroid a.button span:after {
            content: '\f105';
            position: absolute;
            opacity: 1;
            right: 0;
            top: 0;
            transition: 0.5s;
            font-family: FontAwesome;
            font-size: 1.2rem;
            line-height: 1.5rem;
            font-weight: bold;
        }


@media screen and (max-width: 1023px) {
    .polaroid-container {
        flex-direction: column;
    }

    div.polaroid .content h2 {
        font-size: 2rem;
        line-height: 2.1rem;
    }

    div.polaroid .content .polaroid-description,
    div.polaroid .content .polaroid-description span,
    div.polaroid .content .polaroid-description p {
        font-size: 1.5rem;
        line-height: 30px;
        margin-bottom: 3rem;
    }

    div.polaroid a.button {
        font-size: 1.3rem;
    }

        div.polaroid a.button span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
            padding-right: 2rem;
        }

            div.polaroid a.button span:after {
                opacity: 1;
                right: 0;
                font-size: 1.6rem;
                line-height: 2rem;
            }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    div.polaroid .image-container {
        height: 450px;
    }
}

@media screen and (max-width: 767px) {
    div.polaroid .content h2 {
        font-size: 1.55rem;
        line-height: 2rem;
        margin-top: initial;
    }

    div.polaroid .content .polaroid-description,
    div.polaroid .content .polaroid-description span,
    div.polaroid .content .polaroid-description p {
        font-size: 1.2rem;
    }

    div.polaroid a.button {
        font-size: 1rem;
    }

        div.polaroid a.button span:after {
            font-size: 1.3rem;
            line-height: 1.7rem;
        }
}