/*COLLECTIONS Photo Album Links*/

/*=======================================*/

.container {margin: 30px auto; text-align: center; justify-content: center; justify-items: center; justify-self: center;}

/*Need part of this div code for old Safari*/
.container div {display: inline-block; width: 100%; vertical-align: top; border: 2px solid #DCC4A3; background-color: #FFF; transition: .15s; border-radius: 8px;}

.container img {display: block; width: 100%; object-fit: cover; aspect-ratio: 4.5 / 3; border-radius: 6px 6px 0 0;}
/* can't use img width & height for PageSpeed */

.container div .tall {object-fit: contain !important;}

.container span {display: block; padding: 13px 15px; text-align: center; font-size: 1.1em; line-height: 1.2; font-weight: 500; background-color: #DCC4A3; border-radius: 0 0 6px 6px; margin-top: auto;}
.container span:after {display: inline-block; content: "\276F"; margin-left: 10px; transition: transform .15s ease;}
.container a {display: flex; flex-direction: column; width: 100%; height: 100%; text-decoration: none; color: inherit;}
.container div:hover {border: 2px solid #9C733B; filter: saturate(120%) brightness(110%);}
.container div:hover span:after {transform: translateX(3px);}

@media (min-width: 1001px) {
.container {grid-template-columns: repeat(3, auto);} .container img {height: max(120px, min(18vw, 300px));}
}
@media (max-width: 1000px) and (min-width: 721px) {
.container {grid-template-columns: repeat(2, auto);} .container img {height: max(120px, min(26vw, 260px));}
}

/*@media (min-width: 1451px) {.container {grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));}}
@media (max-width: 1450px) {.container {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}}
@media (max-width: 800px) and (min-width: 721px) {.container {grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));}}
*/

@media (min-width: 721px) {.container {display: grid; grid-gap: 30px 20px; gap: 30px 20px;}}
@media (max-width: 720px) {.container {display: block;} .container div:not(.container div:last-child) {margin-bottom: 30px;}}