/* ===================================
   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);

    /* main */
    --main-padding-bottom: var(--spacing-3xl);
    --main-padding: 0 0 var(--main-padding-bottom);
}

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

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

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

.main {
    padding: var(--main-padding);
}
.main h2 {
    width: 152px;
}
.main > .content {
    /* dimensions */
    width: calc( 100% - 152px );
    gap: calc( var(--spacing-2xl) - 10px );

}

/* ===================================
   OWNER SECTION
   =================================== */
.owner-section {
    height: 500px;
    width: 564px;
    gap: var(--spacing-sm);
}
.owner-section img {
    height: 100%;
    width: 446px;
}
.owner-section .info p {
    color: var(--color-text-p);
}
.owner-section .info .h4 {
    color: var(--color-text-cap);
}

/* ===================================
   PHOTOS
   =================================== */
.main .photos {
    gap: var(--spacing-sm);
}
.main .photos img {
    width: calc( (100% - var(--spacing-sm)*2) /3 );
    height: 400px;
}

/* ===================================
   BRAND HISTORY
   =================================== */
.owner-history,
.brand-history {
    width: 600px;
    color: var(--color-text-p);
}
.img-full-size {
    height: 400px;
}

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

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

    /* ===================================
       OWNER SECTION
       =================================== */
    .owner-section {
        height: 354px;
        width: 430px;
    }
    .owner-section img {
        width: 315px;
    }


    /* ===================================
       PHOTOS
       =================================== */
    .main .photos img {
        height: 226px;
    }

    /* ===================================
       BRAND HISTORY
       =================================== */
    .owner-history,
    .brand-history {
        width: var(--width-full);
    }
}

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

    /* ===================================
       OWNER SECTION
       =================================== */
    .main {
        gap: calc( var(--spacing-lg) + 10px );
    }

    .main > .content {
        width: var(--width-full);
    }

    /* ===================================
       OWNER SECTION
       =================================== */
    .owner-section {
        height: 447px;
        width: var(--width-full);
    }
    .owner-section img {
        width: var(--width-full);
    }

    /* ===================================
        PHOTOS
    =================================== */
    .main .photos img {
        width: 100%;
        height: 400px;
    }

    /* ===================================
       BRAND HISTORY
       =================================== */
    .owner-history,
    .brand-history {
        width: var(--width-full);
    }

}