/* ABOUT - BerryVines.com */

.abt {display: flex; gap: 2rem; align-items: center; margin: 2rem auto; padding: 1rem; flex-wrap: nowrap;}
.alt-lft {flex-direction: row-reverse;}
.abt .text-content {flex: 0 1 60%;}
.abt figure {flex: 0 0 40%; max-width: 400px; margin: 0;}
.abt figcaption {font-size: 0.9rem; margin-top: 0.5rem;}
.abt img {display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto;}

@media (max-width: 768px) {
.abt {flex-direction: column;}
.alt-lft figure, .alt-rgt figure {margin: 0 auto; order: -1;}
}



/* PHOTOS: Grid + Masonry Setup */
.grid {margin: 0 auto; position: relative; opacity: 0; transition: opacity 0.5s ease-out;}
.grid::after {content: ""; display: table; clear: both;}
.grid--loaded {opacity: 1;}
.grid-item {padding-right: var(--gutter); /*padding-bottom: var(--gutter);*/ padding-bottom: 20px; max-width: 300px;}

/* make the images fluid inside each tile */
.grid-item img {width: 100%; height: auto; display: block; border-radius: 3px; margin: 0 auto; border: 1px solid #8ba997; }

/* 1 column (up to 767px) */
@media only screen and (max-width: 767px) {.grid-sizer, .grid-item {width: 100%;}}
/* 2 columns (768px–1359px): 1 gutter total */
@media only screen and (min-width: 768px) and (max-width: 1359px) {.grid-sizer, .grid-item {width: calc((100% - var(--gutter)) / 2);}}
/* 3 columns (1360px–1599px): 2 gutters total */
@media only screen and (min-width: 1360px) and (max-width: 1599px) {.grid-sizer, grid-item { width: calc((100% - (2 * var(--gutter))) / 3);}}
/* 4 columns (1600px+): 3 gutters */
@media only screen and (min-width: 1600px) {.grid-sizer, .grid-item {width: calc((100% - (3 * var(--gutter))) / 4);}}

@media only screen and (max-width: 660px) {
.grid-sizer, .grid-item {position: static !important; width: 100%; margin: 0 auto; position:relative;}
.grid-item img {width: 100%; max-width: 300px; height:auto;}
}

@media print {
/* 1) Reset the grid container so it flows normally */
.grid, .grid--loaded {display: block !important; width: auto !important; position: static !important; transform: none !important; opacity: 1 !important;   visibility: visible !important;}
/* clearfix after floats */
.grid::after {content: ""; display: table; clear: both;}
/* Float each real item, 300px wide, gutter on right */
.grid-item {position: static !important; float: left !important;
width: 300px !important; height: auto !important; margin: 5px 5px 5px 0 !important; transform: none !important;}
.grid-sizer {display: none !important; float: none !important;}
/* Ensure the img itself fills its box */
.grid-item img {display: block !important; width: 100% !important; height: auto !important;}
}