/* ===================================
   CSS VARIABLES
   =================================== */

/* Layout Dimensions */
:root {
    --container-width-tablet: 760px;
    --container-width-mobile: 343px;
}

/* Spacing & Padding */
:root {
    /* Common Spacing Values */
    --spacing-xs: 16px;
    --spacing-sm: 20px;
    --spacing-md: 30px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-2xl: 80px;
    --spacing-3xl: 100px;
    --spacing-4xl: 150px;
    
    /* Body Padding */
    --body-padding-left: var(--spacing-lg);
    --body-padding-right: var(--body-padding-left);
    --body-padding: 0 var(--body-padding-right) 0 var(--body-padding-left);
    
    /* Hero Section */
    --hero-padding-top: 126px;
    --hero-padding-bottom: var(--spacing-2xl);
    --hero-padding: var(--hero-padding-top) 0 var(--hero-padding-bottom);
    
    /* Gallery Section */
    --gallery-padding-left: 0;
    --gallery-padding-right: 0;
    --gallery-padding-top: 0;
    --gallery-padding-bottom: var(--spacing-3xl);
    --gallery-padding: 0 0 var(--gallery-padding-bottom);
    
    /* Services Section */
    --services-padding-top: var(--spacing-3xl);
    --services-padding: var(--services-padding-top) 0 0;
    --service-padding-top: var(--spacing-md);
    --service-padding-bottom: var(--service-padding-top);
    --service-padding: var(--service-padding-top) 0 var(--service-padding-bottom);
    
    /* CTA Section */
    --section-cta-padding-top: var(--spacing-4xl);
    --section-cta-padding-right: var(--spacing-lg);
    --section-cta-padding-bottom: var(--section-cta-padding-top);
    --section-cta-padding-left: var(--section-cta-padding-right);
    --section-cta-padding: var(--section-cta-padding-top) var(--section-cta-padding-right);
    }

/* Common Dimensions */
:root {
    --height-icon: 30px;
}

/* ===================================
   HERO SECTION
   =================================== */

.hero {
    padding: var(--hero-padding);
}


/* ===================================
   MAIN CONTENT
   =================================== */

.main {
    /* height: var(--fit-content);
    display: flex;
    flex-direction: column;
    align-items: center; */
}
main > .section {
    height: var(--fit-content);
    width: var(--width-full);
}


/* ===================================
   GALLERY SECTION
   =================================== */

.section-gallery {
    padding: var(--gallery-padding);
}
.section-gallery > h2 {
    width: 150px;
}
.section-gallery .content {
    grid-template-rows: repeat(3, 360px);
}
.section-gallery .content .row {
    row-gap: 60px;
}
.section-gallery .content article figcaption .label {
    color: var(--color-text-p);
}
.section-gallery .content article figcaption .price {
    color: var(--color-text-cap);
}
.section-gallery .content article img {
    height: 318px;
    border-radius: var(--radius-lg);
}


/* ===================================
   SERVICES SECTION
   =================================== */
.section-services {
    padding: var(--services-padding);
}
.section-services h2 {
    color: var(--color-text-p);
    width: 203px;
}
.section-services > .content {
    width: calc(100% - 203px);
    gap: 40px;
}
.content .service {
    padding: var(--service-padding);
    border-top: 1px solid var(--color-divider);
    gap: 20px;
}
.service .description {
    width: calc((100% - 20px) / 2);
    color: var(--color-text-p);
    gap: 24px;
}
.service .description h3 {
    font-size: var(--fs-h1);
}
.service img {
    height: 421px;
    width: calc((100% - 20px) / 2);
    border-radius: var(--radius-lg);
}


/* ===================================
   CALL-TO-ACTION SECTION
   =================================== */

.section-cta {
    padding: var(--section-cta-padding);
    gap: 40px;
}
.section-cta > .section-content {
    max-width: 400px;
    gap: 20px;
}


/* ===================================
   TABLET
   =================================== */

@media (max-width: 1200px) and (min-width: 769px) {
    :root {
        --body-padding-left: var(--spacing-sm);
        --container-width: var(--container-width-tablet);
    }

    /* Main */
    .main {
        width: var(--container-width);
    }

    /* Hero section */
    .hero {
        width: var(--container-width);
    }

    /* Gallery section */
    .section-gallery {
        gap: var(--spacing-lg);
    }
    .section-gallery h2 {
        width: var(--width-full);
    }

    /* Services section */
    .section-services {
        width: var(--container-width);
        gap: var(--spacing-lg);
    }
    .section-services h2 {
        width: var(--width-full);
    }
    .section-services .content {
        width: var(--width-full);
    } 
    .content > .service {
        width: var(--width-full);
    }
    .service img {
        height: 618px;
    }
}


/* ===================================
   MOBILE
   =================================== */

@media (max-width: 768px) {
    :root {
        --body-padding-left: var(--spacing-xs);
        --hero-padding-bottom: 56px;
        --container-width: var(--container-width-mobile);
    }

    /* hero */
    .hero {
        width: var(--container-width);
        margin: 0 auto;
    }

    /* main */
    .main {
        width: var(--container-width);
    }
    
    /* gallery section */
    .section-gallery {
        gap: var(--spacing-lg);
    }
    .section-gallery h2 {
        width: var(--width-full);
    }

    /* services section */
    .section-services {
        width: var(--container-width);
    }
    .section-services h2 {
        width: var(--width-full);
    }
    .section-services .content {
        width: var(--width-full);
    }
    .content .service {
        width: var(--width-full);
    }
    .content .service .description h3 {
        font-size: var(--fs-h2);
    }
    .service img {
        height: 295px;
    }
    .content .service > * {
        width: var(--width-full);
    }
}