.coffeeshop-slider__item,
.green-background {
    background-color: var(--main-site-bakground);
    color: #fff
}

.coffeeshop-slider__item a,
.green-background a {
    color: #fff
}

.coffeeshop-slider__item h6,
.green-background h6 {
    color: var(--main-light-color)
}

.coffee-background {
    background-color: var(--main-second-site-background);
    color: #fff
}

.coffee-background a {
    color: #fff
}

.coffee-background h6 {
    color: var(--main-light-color)
}

.coffee-shop__into {
    padding: 60px 20px 40px
}

.coffee-shop__into__right {
    text-align: right
}

.coffee-shop__into__desc {
    grid-area: desc
}

.coffee-shop__into__desc .readmore--link {
    margin-top: 25px
}

.coffee-shop__into p {
    margin-top: 1.2em
}

.coffee-shop__into--counter {
    display: grid;
    grid-template-areas: "left right" "desc desc";
    grid-template-columns: 1fr 1fr
}

/* Anh tru so cong ty duoi khoi Dia Diem */
.coffee-shop__photo {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 40px
}

@media screen and (min-width:768px) {
    .coffee-shop__photo {
        margin-top: 60px
    }
}

.coffee-shop h6 {
    text-transform: uppercase
}

.coffee-shop h6 span {
    font-family: var(--main-font-coffee);
    display: block;
    font-size: 65px;
    color: var(--main-site-bakground)
}

.coffee-shop h2 {
    color: var(--main-site-bakground);
    margin-bottom: 32px;
    margin-top: 32px;
    font-size: 32px
}

.coffeeshop-slider__item {
    display: grid;
    grid-template-areas: "image" "text" "bottom";
    grid-template-rows: 4fr 3fr 1fr
}

.coffeeshop-slider__item__image {
    grid-area: image
}

.coffeeshop-slider__item__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.coffeeshop-slider__item__text {
    grid-area: text;
    padding: 45px 45px 0
}

.coffeeshop-slider__item__bottom {
    align-self: end;
    grid-area: bottom;
    padding: 0 45px 45px;
    display: grid;
    grid-gap: 40px;
    grid-template-columns: 1fr 1fr
}

.coffeeshop-slider__quote {
    font-family: iCielProza, sans-serif;
    font-size: 24px
}

@media screen and (min-width:768px) {
    .coffee-shop__into {
        padding: 20px 0 40px
    }
    .coffee-shop__into__left,
    .coffee-shop__into__right {
        text-align: center
    }
    .coffee-shop__into__desc {
        margin: 0
    }
    .coffee-shop__into__desc p {
        margin-top: 0
    }
    .coffee-shop__into--counter {
        padding: 0 60px;
        grid-template-areas: "left right desc";
        grid-template-columns: 1fr 1fr 2fr;
        grid-gap: 60px
    }
    .coffee-shop__into--grid {
        padding: 0 60px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 30px
    }
    .coffee-shop__into--grid .image-wapper {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }
    .coffee-shop h2 {
        margin-top: 0;
        font-size: 32px
    }
    .coffeeshop-slider__item {
        grid-template-areas: "image text" "image bottom";
        grid-template-columns: 50% 50%;
        grid-template-rows: unset
    }
    .coffeeshop-slider__item__text {
        min-height: unset
    }
    .coffeeshop-slider__item__bottom {
        grid-gap: 60px
    }
}

@media screen and (min-width:1200px) {
    .coffee-shop__wapper {
        padding: 105px 200px 60px
    }
    .coffee-shop__into {
        grid-gap: 80px
    }
    .coffee-shop__into__left,
    .coffee-shop__into__right {
        text-align: left
    }
    .coffee-shop__into--counter {
        padding: 0 20px
    }
    .coffee-shop__into--grid {
        padding: 0 0 70px;
        grid-gap: 0
    }
    .coffee-shop__into--grid .text {
        padding-right: 165px
    }
    .coffee-shop h2 {
        font-size: 54px
    }
    .coffeeshop-slider__item__bottom {
        grid-gap: 100px
    }
}

/*# sourceMappingURL=coffee-shop.style.css.map*/