/*=============  Font  =============*/
@font-face {
    font-family: 'Sitara-Regular';
    src: url('https://static.wfonts.com/data/2016/07/12/sitara/Sitara-Regular.ttf') format('truetype');
}

/*===========  Generalni  ==========*/
:root {
    --theme: #8D827B;
}

h2 {
    font-family: 'Work Sans';
}

h5 {
    font-family: 'Sitara-Regular', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: normal;
}

/*=============  Hero  =============*/
#hero {
    height: 100%;
    align-items: center;
    font-family: Sora;
    background: url(../img/uređenje.jpg) center center, linear-gradient(90deg,#0a0a0a 20%, #cbcbcb21 100%);
	background-blend-mode: color;
    background-size: cover;
}

#hero > div {
    color: #f4ede9;
    gap: 1.75rem;
	padding: 0 6rem;
}

#hero h2 {
    margin: 4rem 0 2.5rem;
    font-size: 3.2rem;
}

#hero h2::before {
    content: "";
    width: 8rem;
    height: 0.5rem;
    display: block;
	position: absolute;
	bottom: -2rem;
    background: #c8b8a9;
}

#hero h5 {
    width: min(31rem, 95%);
}

#hero img {
    width: 45%;
	height: 100%;
	object-fit: cover;
}

/*============  Gallery  ===========*/
#gallery, #offers {
    gap: 2rem;
	padding: 5rem 7rem;
    color: #5f5f5f;
}

:is(#gallery, #offers) h2 {
    padding: 0 0 1.75rem;
}

:is(#gallery, #offers) h2::after {
    content: "";
	width: 7.75rem;
	height: 0.5rem;
	position: absolute;
	left: 50%;
	bottom: 0.5rem;
	background: #c8b8a9;
	transform: translateX(-50%);
}

#gallery div, #offers > div {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
	grid-template-rows: 1fr;
    gap: 2.5rem;
}

#gallery img {
	width: 100%;
    object-fit: cover;
	aspect-ratio: 1;
}

/*============  Offers  ============*/
#offers {
    background: #e3dbd6;
}

#offers h5 {
    padding: 0 1rem;
}

#offers > div > div {
    gap: 1rem;
    background: #f3ede9;
    border-radius: 0.5rem;
    text-align: center;
}

#offers h4 {
    margin: 0 0 1rem;
    font-weight: 600;
}

/*#offers h4::after {
    content: "";
    width: 6rem;
    height: 0.25rem;
    position: absolute;
    bottom: -1rem;
    left: 50%;
	background: #c8b8a9;
    transform: translateX(-50%);
}*/

#offers div > img {
    width: 100%;
    height: 14rem;
    border-radius: 0.5rem 0.5rem 0 0;
    object-fit: cover;
    object-position: top;
}

#offers div > img.bottom {
    object-position: bottom;
}

#offers a {
    margin: 0.75rem 0 2rem;
}

/*==========  Responsive  ==========*/
@media screen and (min-width: 1500px) {
    /*==========  Gallery  =========*/
    #gallery div, #offers > div {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    }

	/*==========  Offers  ==========*/
    #offers div > img {
        height: 20rem;
    }
}

@media screen and (max-width: 1200px) {

	/*===========  Hero  ===========*/
    #hero {
        background-position: 56% 30%;
    }

    /*==========  Gallery  =========*/
    #gallery, #offers {
        padding: 3rem;
    }

    #gallery div, #offers > div {
        grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    }
}

@media screen and (max-width: 1000px) {
    
	/*===========  Hero  ===========*/
    #hero {
        background: url(../img/uređenje.jpg) center center, linear-gradient(90deg,#0a0a0a 5%, #cbcbcb21 100%);
        background-position: 64% 30%;
    }
}

@media screen and (max-width: 768px) {

    /*==========  Gallery  =========*/
    #gallery div, #offers > div {
        grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    }
}

@media screen and (max-width: 540px) {

	/*===========  Hero  ===========*/
    #hero > div, #gallery, #offers {
        padding: 3rem 1rem;
    }

	/*==========  Gallery  =========*/
    #gallery, #offers {
        text-align: center;
    }

    #gallery > div {
	    display: flex;
	    flex-flow: row;
	    gap: 1rem;
        overflow: scroll;
    }

    #gallery img {
        width: 90%;
    }
}

@media screen and (max-width: 365px) {
    
	/*==========  General  =========*/
    h2 {
        font-size: 2rem !important;
    }
}