﻿/* SAFARIBOK 1.3.0: Bootstrap-kolumner får inte krympa kort inuti CSS Grid. */
#app.webb-home .home-animal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0}
#app.webb-home .home-animal-grid>.home-animal-column{width:auto;max-width:none;min-width:0;padding:0}
#app.webb-home .home-animal-grid .animal-card{display:block;width:100%;min-width:0}
#app.webb-home .home-animal-grid .image-wrap{position:relative;width:100%;height:auto;aspect-ratio:4/3;overflow:hidden;border-radius:15px}
#app.webb-home .home-animal-grid .image-wrap>a{display:block;width:100%;height:100%}
#app.webb-home .home-animal-grid .image-wrap img{display:block;width:100%;height:100%;object-fit:cover}
#app.webb-home .home-animal-grid .image-label{max-width:calc(100% - 70px)}
@media(max-width:1100px){#app.webb-home .home-animal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:780px){#app.webb-home .home-animal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){#app.webb-home .home-animal-grid{grid-template-columns:1fr}}

/* 1.3.1: Kortet ska fylla sin gridcell även om äldre kolumnregler finns kvar. */
#app.webb-home .home-animal-grid>.home-animal-column{width:100%!important;max-width:100%!important;flex:none!important;padding:0!important;margin:0!important}
#app.webb-home .home-animal-grid .animal-card .image-wrap{width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:4/3!important}
#app.webb-home .home-animal-grid .animal-card .image-wrap img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important}
