/* Real photos in photo gallery */
through its closing } with this stronger version:

/* Real photos in photo gallery - fixed sizing */

.simple-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 100%;
}

.simple-photo-grid .photo-card {
  width: 100%;
  height: 280px;
  min-width: 0;
  min-height: 0 !important;
  max-width: 100%;
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.simple-photo-grid .photo-card img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  max-width: 100%;
  max-height: 100%;

  display: block;
  object-fit: cover;
  object-position: center;
}

.simple-photo-grid .photo-card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;

  padding: 38px 16px 14px;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85),
    transparent
  );

  color: white;
  font-weight: 700;
}

/* Tablet */
@media (max-width: 940px) {
  .simple-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .simple-photo-grid .photo-card,
  .simple-photo-grid .photo-card:first-child {
    height: 280px;
    min-height: 0 !important;
    grid-column: auto;
  }
}

/* Phone */
@media (max-width: 620px) {
  .simple-photo-grid {
    grid-template-columns: 1fr;
  }

  .simple-photo-grid .photo-card,
  .simple-photo-grid .photo-card:first-child {
    width: 100%;
    height: 240px;
    min-height: 0 !important;
    grid-column: auto;
  }
}
The important changes are minmax(0, 1fr), min-width: 0, max-width: 100%, and absolutely positioning the image inside the fixed-size card. That prevents even a huge camera JPEG from determining the width of the grid.

Also, your CSS currently contains these older rules:

.simple-photo-grid .photo-card{min-height:280px}
and:

.simple-photo-grid .photo-card:first-child{
  grid-column:span 2;
  min-height:340px
}
Those are earlier in the file. 


You can leave them there if you put my replacement block at the very bottom, because the new rules override them with min-height: 0 !important. But eventually I would clean those old rules out so the CSS isn't fighting itself.

Your photo HTML should remain as simple as:

<figure class="photo-card">
  <img
    src="media/photos/wildboar.jpg"
    alt="Feral hog, also known as a wild boar, photographed in Far West Texas"
    loading="lazy"
    decoding="async"
  >
  <figcaption>
    Feral Hog (Wild Boar) · Far West Texas
  </figcaption>
</figure>
After changing styles.css, do a Ctrl+F5 in your browser so you're not seeing a cached copy of the old CSS. That could also explain why your previous CSS edit appeared to do nothing.


give me the full css replacement

Here is the full replacement CSS file, based on the CSS you uploaded, with the gallery sizing fix already integrated. 



Replace your current:

assets/css/styles.css
with this file.

This keeps your existing logo sizing, bird-image cards, audio players, photo credits, mobile layout, and the rest of the site styling, but fixes the real-photo gallery so large JPEGs stay constrained inside their cards instead of stretching the page.

After uploading it, do a Ctrl+F5 on the website to force the browser to reload the new CSS instead of using a cached copy. 



Library
/
styles-bigbendwild-clean.css


/* Far West Texas Nature — mobile-first, dependency-free */
:root{
  --bg:#10130f;--bg2:#161a14;--surface:#1b2119;--surface2:#20271e;
  --text:#f5efe3;--muted:#b8b2a6;--sand:#e1b768;--rust:#a85f3d;
  --sage:#7f8f76;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);
  --shadow:0 24px 70px rgba(0,0,0,.34);--radius:24px;--max:1180px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;color:var(--text);background:
  radial-gradient(circle at 85% 0,rgba(168,95,61,.15),transparent 28rem),
  radial-gradient(circle at 0 70%,rgba(225,183,104,.07),transparent 24rem),var(--bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}button{font:inherit}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}
[hidden]{display:none!important}
:focus-visible{outline:3px solid rgba(225,183,104,.75);outline-offset:4px;border-radius:8px}
.skip-link{position:fixed;top:10px;left:10px;z-index:1000;padding:10px 14px;background:#fff;color:#111;border-radius:9px;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.shell{width:min(var(--max),calc(100% - 34px));margin-inline:auto}
.site-header{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top);transition:.2s ease}
.site-header.scrolled{background:rgba(16,19,15,.87);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:
  radial-gradient(circle at 67% 28%,var(--sand) 0 8%,transparent 9%),
  linear-gradient(162deg,transparent 0 47%,var(--sage) 48% 56%,transparent 57%),#1d211b}
.brand-copy{display:grid;line-height:1}.brand-copy strong{font-size:.88rem;letter-spacing:.07em}.brand-copy small{margin-top:5px;color:var(--sand);letter-spacing:.22em;font-weight:800;font-size:.66rem}
.desktop-nav{display:flex;gap:28px;color:#ded8cc;font-size:.94rem}.desktop-nav a:hover{color:var(--sand)}
.menu-button{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.04);padding:11px;color:white;cursor:pointer}
.menu-button span{display:block;height:2px;background:currentColor;margin:4px 0;border-radius:2px}
.mobile-menu{position:fixed;z-index:49;top:72px;left:14px;right:14px;padding:10px;background:rgba(24,29,22,.97);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.mobile-menu a{display:flex;align-items:center;min-height:50px;padding:0 13px;border-radius:10px}.mobile-menu a:hover{background:rgba(255,255,255,.05)}
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:linear-gradient(#66432f 0%,#3d382c 38%,#1d241b 72%,var(--bg) 100%)}
.hero-sky{position:absolute;inset:0;background:
  radial-gradient(circle at 77% 19%,rgba(239,197,114,.36),transparent 11rem),
  linear-gradient(to bottom,rgba(10,11,9,.05),rgba(10,12,9,.08) 50%,rgba(10,12,9,.74))}
.hero-ridge{position:absolute;left:-10%;width:120%;pointer-events:none}
.ridge-back{bottom:13%;height:37%;background:linear-gradient(165deg,transparent 0 38%,rgba(38,46,35,.78) 39% 58%,transparent 59%)}
.ridge-front{bottom:-4%;height:35%;background:linear-gradient(197deg,transparent 0 40%,rgba(15,19,14,.98) 41% 65%,transparent 66%)}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:52px;align-items:end;padding:150px 0 96px}
.kicker,.section-label{text-transform:uppercase;letter-spacing:.16em;color:var(--sand);font-size:.73rem;font-weight:850;margin:0}
.kicker::before,.section-label::before{content:"";display:inline-block;width:28px;height:1px;background:currentColor;vertical-align:middle;margin-right:10px;opacity:.75}
h1,h2{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:clamp(3.7rem,9.2vw,7.7rem);line-height:.89;margin:15px 0 24px}
.hero-lead{max-width:700px;color:#e0d9cc;font-size:clamp(1rem,1.8vw,1.2rem);margin:0 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.button{min-height:50px;padding:0 21px;border:1px solid var(--line);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;transition:.18s ease}.button:hover{transform:translateY(-2px)}
.button.primary{background:var(--sand);color:#1c1811;border-color:transparent}.button.ghost{background:rgba(255,255,255,.045)}
.privacy-card{justify-self:end;max-width:340px;display:flex;gap:13px;padding:18px 19px;background:rgba(13,16,12,.26);backdrop-filter:blur(9px);border-left:2px solid rgba(225,183,104,.65);border-radius:0 16px 16px 0;color:#d5cebf}.privacy-card p{margin:3px 0 0;font-size:.9rem;color:#bfb8ab}.privacy-icon{color:var(--sand);font-size:1.3rem}
.intro{padding:74px 0;border-bottom:1px solid var(--line)}.intro-grid{display:grid;grid-template-columns:.55fr 1.45fr;gap:50px}.intro h2{font-size:clamp(2.4rem,5vw,4.2rem);line-height:1;margin:0 0 18px}.intro p:not(.section-label){max-width:760px;color:var(--muted);font-size:1.06rem}
.section{padding:92px 0}.section-heading{display:grid;grid-template-columns:1fr minmax(280px,460px);gap:36px;align-items:end;margin-bottom:28px}.section-heading h2,.about-grid h2,.discover-grid h2{font-size:clamp(2.3rem,5vw,4.2rem);line-height:1;margin:9px 0 0}.section-heading>p{margin:0;color:var(--muted)}
.filter-row{display:flex;gap:9px;overflow-x:auto;padding:1px 1px 15px;scrollbar-width:none}.filter-row::-webkit-scrollbar{display:none}.filter{flex:none;min-height:40px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);color:#d9d3c7;font-weight:750;cursor:pointer}.filter.active{background:var(--text);color:#151711;border-color:transparent}
.sound-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.sound-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.046),rgba(255,255,255,.018));box-shadow:var(--shadow)}
.card-visual{aspect-ratio:16/9;position:relative;background:linear-gradient(145deg,#69452f,#30362c 60%,#171a16)}.card-visual::after{content:"";position:absolute;inset:auto -5% -18%;height:62%;background:linear-gradient(165deg,transparent 0 38%,rgba(29,36,27,.86) 39% 60%,transparent 61%)}
.card-visual.storm{background:linear-gradient(150deg,#2b3340,#544c3c 55%,#1a1e19)}.card-visual.wind{background:linear-gradient(150deg,#7c5b3e,#3d4435 60%,#181b16)}.card-visual.dawn{background:linear-gradient(150deg,#936345,#525245 60%,#20251d)}.card-visual.night{background:radial-gradient(circle at 73% 20%,#d9d0aa 0 2%,transparent 3%),linear-gradient(150deg,#18202d,#1c2a2d 60%,#111510)}.card-visual.rain{background:linear-gradient(150deg,#36434a,#595546 58%,#19201a)}
.visual-label{position:absolute;z-index:2;left:15px;top:15px;padding:6px 9px;border-radius:999px;background:rgba(12,15,12,.56);border:1px solid var(--line);backdrop-filter:blur(7px);font-size:.67rem;letter-spacing:.08em;text-transform:uppercase}
.card-body{padding:20px}.meta{margin:0 0 7px;color:var(--sand);font-size:.68rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase}.card-body h3{font-size:1.23rem;margin:0 0 7px}.card-body>p:not(.meta){color:var(--muted);font-size:.93rem;min-height:44px}
.media-placeholder{margin-top:16px;min-height:42px;display:flex;align-items:center;padding:9px 11px;border-radius:12px;border:1px dashed var(--line2);color:#9f9a90;background:rgba(255,255,255,.02);font-size:.74rem;overflow-wrap:anywhere}
.editor-note{margin-top:22px;padding:18px 20px;border:1px solid rgba(225,183,104,.18);background:rgba(225,183,104,.045);border-radius:16px;color:#cfc8bb;font-size:.92rem}.editor-note strong{color:var(--text)}
.feature-section{padding-top:32px}.feature{display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:var(--shadow)}.feature-art{min-height:455px;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 75% 21%,rgba(229,185,101,.42),transparent 8rem),linear-gradient(145deg,#734a31,#353d30 60%,#171a16)}.feature-art::after{content:"";position:absolute;inset:auto -3% -12%;height:55%;background:linear-gradient(165deg,transparent 0 38%,#242b21 39% 61%,transparent 62%)}.feature-badge{position:absolute;z-index:2;top:18px;left:18px;font-size:.67rem;letter-spacing:.12em;font-weight:900;background:rgba(12,15,12,.6);padding:7px 10px;border-radius:999px;border:1px solid var(--line)}.play-icon{position:relative;z-index:2;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:rgba(16,19,15,.58);backdrop-filter:blur(8px);border:1px solid var(--line2);padding-left:4px;font-size:1.35rem}
.feature-copy{padding:42px;display:flex;flex-direction:column;justify-content:center}.feature-copy h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1;margin:9px 0 18px}.feature-copy p{color:var(--muted)}.small-note{font-size:.86rem}
.photo-grid{display:grid;grid-template-columns:1.3fr .85fr .85fr;grid-auto-rows:235px;gap:14px}.photo-card{margin:0;position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--line);background:#252a22}.photo-large{grid-row:span 2}.photo-placeholder{height:100%;background:linear-gradient(145deg,#724a31,#343b30 62%,#171a16)}.photo-sunset{background:radial-gradient(circle at 73% 22%,rgba(236,193,105,.65),transparent 6rem),linear-gradient(145deg,#8a5636,#4e4736 58%,#1e251d)}.photo-wildlife{background:linear-gradient(145deg,#695037,#3f4838 64%,#1a1e18)}.photo-storm{background:linear-gradient(145deg,#303a43,#554f40 64%,#171d18)}.photo-night{background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.6) 0 1px,transparent 2px),radial-gradient(circle at 70% 32%,rgba(255,255,255,.45) 0 1px,transparent 2px),linear-gradient(145deg,#171d2b,#15211e 70%,#0d110d)}.photo-landscape{background:linear-gradient(145deg,#765038,#3d4535 60%,#171a15)}.photo-card figcaption{position:absolute;inset:auto 0 0;padding:38px 17px 16px;background:linear-gradient(to top,rgba(8,10,8,.86),transparent);font-weight:760}
.about-section{border-top:1px solid var(--line)}.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px}.about-copy{color:var(--muted);font-size:1.04rem}.location-box{margin-top:24px;padding:21px 22px;border-radius:16px;border:1px solid rgba(225,183,104,.18);background:rgba(225,183,104,.045);color:#d9d2c5}.location-box p{margin:6px 0 0}
.discover-section{padding:74px 0;background:linear-gradient(100deg,rgba(168,95,61,.14),rgba(225,183,104,.045));border-block:1px solid var(--line)}.discover-grid{display:grid;grid-template-columns:1fr .8fr;gap:40px;align-items:end}.discover-grid>p{color:var(--muted);font-size:1.06rem}
footer{padding:42px 0 calc(44px + env(safe-area-inset-bottom));color:var(--muted)}.footer-grid{display:grid;grid-template-columns:1fr auto auto;gap:45px;align-items:start}.footer-brand{color:var(--text);font-weight:850}.footer-grid p{margin:7px 0 0;font-size:.9rem}.footer-grid nav{display:grid;gap:8px;font-size:.9rem}.footer-grid nav a:hover{color:var(--sand)}.footer-meta{display:grid;gap:8px;text-align:right;font-size:.86rem}
.mobile-dock{display:none}
@media(max-width:940px){
  .desktop-nav{display:none}.menu-button{display:block}.hero-inner,.section-heading,.feature,.about-grid,.intro-grid,.discover-grid{grid-template-columns:1fr}.privacy-card{justify-self:start;max-width:480px}.sound-grid{grid-template-columns:1fr 1fr}.photo-grid{grid-template-columns:1fr 1fr}.photo-large{grid-row:auto;grid-column:span 2;min-height:350px}.footer-grid{grid-template-columns:1fr 1fr}.footer-meta{text-align:left}.mobile-dock{display:grid;position:fixed;z-index:45;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));grid-template-columns:repeat(4,1fr);min-height:60px;background:rgba(22,26,20,.91);backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.mobile-dock a{min-height:60px;display:grid;place-items:center;align-content:center;gap:2px;font-size:.9rem}.mobile-dock small{font-size:.68rem;color:#c7c1b5}footer{padding-bottom:calc(116px + env(safe-area-inset-bottom))}
}
@media(max-width:620px){
  .shell{width:calc(100% - 24px)}.nav{height:64px}.mobile-menu{top:64px}.hero-inner{padding:118px 0 74px}.hero{min-height:88svh}h1{font-size:clamp(3.55rem,17vw,5.2rem)}.hero-actions .button{width:100%}.section{padding:68px 0}.intro{padding:58px 0}.sound-grid,.photo-grid{grid-template-columns:1fr}.photo-large{grid-column:auto;min-height:300px}.photo-grid{grid-auto-rows:220px}.feature-art{min-height:320px}.feature-copy{padding:28px 22px}.footer-grid{grid-template-columns:1fr}.footer-meta{text-align:left}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}


/* Big Bend Wild simplified launch layout */
.simple-brand img{height:58px;width:auto;display:block}
.simple-hero{
  position:relative;
  min-height:88svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:
    radial-gradient(circle at 76% 18%,rgba(239,190,104,.28),transparent 12rem),
    linear-gradient(145deg,#72482f 0%,#42392d 38%,#20271d 70%,#10130f 100%);
}
.simple-hero::before{
  content:"";
  position:absolute;
  inset:auto -8% -6%;
  height:44%;
  background:linear-gradient(166deg,transparent 0 36%,rgba(36,44,33,.9) 37% 59%,transparent 60%);
}
.simple-hero::after{
  content:"";
  position:absolute;
  inset:auto -6% -13%;
  height:35%;
  background:linear-gradient(198deg,transparent 0 39%,rgba(14,18,13,.98) 40% 64%,transparent 65%);
}
.simple-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(12,14,11,.08),rgba(12,14,11,.55) 70%,rgba(12,14,11,.88));
}
.simple-hero-inner{position:relative;z-index:2;padding:132px 0 82px}
.simple-hero-copy{max-width:760px}
.hero-logo{
  width:min(520px,82vw);
  height:auto;
  display:block;
  margin:0 0 24px;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.28));
}
.simple-hero h1{
  font-size:clamp(2.7rem,6vw,5.4rem);
  line-height:.96;
  margin:12px 0 18px;
  max-width:760px;
}
.compact-heading{margin-bottom:24px}
.four-up{grid-template-columns:repeat(2,1fr)}
.simple-photo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.simple-photo-grid .photo-card{min-height:280px}
.photo-section-simple{padding-top:62px}
.mobile-dock.three{grid-template-columns:repeat(3,1fr)}

@media(max-width:940px){
  .simple-brand img{height:52px}
  .four-up{grid-template-columns:1fr 1fr}
  .simple-photo-grid{grid-template-columns:1fr 1fr}
  .simple-photo-grid .photo-card:first-child{grid-column:span 2;min-height:340px}
}
@media(max-width:620px){
  .simple-brand img{height:44px}
  .simple-hero{min-height:82svh}
  .simple-hero-inner{padding:104px 0 64px}
  .hero-logo{width:min(430px,94vw);margin-bottom:20px}
  .four-up,.simple-photo-grid{grid-template-columns:1fr}
  .simple-photo-grid .photo-card:first-child{grid-column:auto;min-height:280px}
}


/* Logo sizing revision:
   Larger, readable header identity; no duplicate oversized hero logo. */
.site-header .nav{
  height:100px;
}
.simple-brand{
  align-self:stretch;
  display:flex;
  align-items:center;
}
.simple-brand img{
  height:94px;
  width:auto;
  max-width:330px;
  object-fit:contain;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.2));
}
.site-header.scrolled .simple-brand img{
  height:82px;
}
.mobile-menu{
  top:100px;
}
.simple-hero-inner{
  padding-top:155px;
}

@media(max-width:940px){
  .site-header .nav{height:84px}
  .simple-brand img{height:78px;max-width:270px}
  .site-header.scrolled .simple-brand img{height:72px}
  .mobile-menu{top:84px}
  .simple-hero-inner{padding-top:130px}
}
@media(max-width:620px){
  .site-header .nav{height:74px}
  .simple-brand img{height:68px;max-width:225px}
  .site-header.scrolled .simple-brand img{height:62px}
  .mobile-menu{top:74px}
  .simple-hero-inner{padding-top:116px}
}

.sound-player {
  width: 100%;
  height: 42px;
  margin-top: 16px;
  display: block;
}

.bird-photo {
  margin: 14px 0 16px;
}

.bird-photo img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 12px;
}

.bird-photo figcaption {
  margin-top: 7px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted);
}

.bird-photo figcaption a {
  color: var(--sand);
  text-decoration: none;
}

.bird-photo figcaption a:hover {
  text-decoration: underline;
}

.sound-player {
  width: 100%;
  margin-top: 16px;
}

/* Actual bird image inside sound-card image area */
.card-visual.bird-image {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #1b2119;
}

.card-visual.bird-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Keep label visible over photo */
.card-visual.bird-image .visual-label {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 5;
}

/* Remove decorative fake mountain overlay from real photos */
.card-visual.bird-image::after {
  display: none;
}

.sound-player {
  width: 100%;
  display: block;
  margin-top: 16px;
}

.photo-credit {
  margin-top: 10px !important;
  min-height: 0 !important;
  font-size: 0.70rem !important;
  line-height: 1.4;
  color: var(--muted);
}

.photo-credit a {
  color: var(--sand);
}

.photo-credit a:hover {
  text-decoration: underline;
}

.birdnet-note {
  margin-top: 28px;
  padding: 18px 20px;
  border-left: 3px solid var(--sand);
  border-radius: 0 14px 14px 0;
  background: rgba(225, 183, 104, 0.05);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.birdnet-note strong {
  color: var(--text);
}

.birdnet-note p {
  margin: 5px 0 0;
}

.birdnet-note a {
  color: var(--sand);
  font-weight: 700;
}

.birdnet-note a:hover {
  text-decoration: underline;
}

/* Real photos in photo gallery - fixed sizing */
.simple-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 100%;
}

.simple-photo-grid .photo-card {
  width: 100%;
  height: 280px;
  min-width: 0;
  min-height: 0 !important;
  max-width: 100%;
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.simple-photo-grid .photo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.simple-photo-grid .photo-card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 38px 16px 14px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85),
    transparent
  );
  color: white;
  font-weight: 700;
}

@media (max-width: 940px) {
  .simple-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .simple-photo-grid .photo-card,
  .simple-photo-grid .photo-card:first-child {
    height: 280px;
    min-height: 0 !important;
    grid-column: auto;
  }
}

@media (max-width: 620px) {
  .simple-photo-grid {
    grid-template-columns: 1fr;
  }

  .simple-photo-grid .photo-card,
  .simple-photo-grid .photo-card:first-child {
    width: 100%;
    height: 240px;
    min-height: 0 !important;
    grid-column: auto;
  }
}
Library
/
styles-bigbendwild-clean.css


/* Far West Texas Nature — mobile-first, dependency-free */
:root{
  --bg:#10130f;--bg2:#161a14;--surface:#1b2119;--surface2:#20271e;
  --text:#f5efe3;--muted:#b8b2a6;--sand:#e1b768;--rust:#a85f3d;
  --sage:#7f8f76;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);
  --shadow:0 24px 70px rgba(0,0,0,.34);--radius:24px;--max:1180px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;color:var(--text);background:
  radial-gradient(circle at 85% 0,rgba(168,95,61,.15),transparent 28rem),
  radial-gradient(circle at 0 70%,rgba(225,183,104,.07),transparent 24rem),var(--bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}button{font:inherit}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}
[hidden]{display:none!important}
:focus-visible{outline:3px solid rgba(225,183,104,.75);outline-offset:4px;border-radius:8px}
.skip-link{position:fixed;top:10px;left:10px;z-index:1000;padding:10px 14px;background:#fff;color:#111;border-radius:9px;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.shell{width:min(var(--max),calc(100% - 34px));margin-inline:auto}
.site-header{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top);transition:.2s ease}
.site-header.scrolled{background:rgba(16,19,15,.87);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line)}
.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:
  radial-gradient(circle at 67% 28%,var(--sand) 0 8%,transparent 9%),
  linear-gradient(162deg,transparent 0 47%,var(--sage) 48% 56%,transparent 57%),#1d211b}
.brand-copy{display:grid;line-height:1}.brand-copy strong{font-size:.88rem;letter-spacing:.07em}.brand-copy small{margin-top:5px;color:var(--sand);letter-spacing:.22em;font-weight:800;font-size:.66rem}
.desktop-nav{display:flex;gap:28px;color:#ded8cc;font-size:.94rem}.desktop-nav a:hover{color:var(--sand)}
.menu-button{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.04);padding:11px;color:white;cursor:pointer}
.menu-button span{display:block;height:2px;background:currentColor;margin:4px 0;border-radius:2px}
.mobile-menu{position:fixed;z-index:49;top:72px;left:14px;right:14px;padding:10px;background:rgba(24,29,22,.97);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.mobile-menu a{display:flex;align-items:center;min-height:50px;padding:0 13px;border-radius:10px}.mobile-menu a:hover{background:rgba(255,255,255,.05)}
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:linear-gradient(#66432f 0%,#3d382c 38%,#1d241b 72%,var(--bg) 100%)}
.hero-sky{position:absolute;inset:0;background:
  radial-gradient(circle at 77% 19%,rgba(239,197,114,.36),transparent 11rem),
  linear-gradient(to bottom,rgba(10,11,9,.05),rgba(10,12,9,.08) 50%,rgba(10,12,9,.74))}
.hero-ridge{position:absolute;left:-10%;width:120%;pointer-events:none}
.ridge-back{bottom:13%;height:37%;background:linear-gradient(165deg,transparent 0 38%,rgba(38,46,35,.78) 39% 58%,transparent 59%)}
.ridge-front{bottom:-4%;height:35%;background:linear-gradient(197deg,transparent 0 40%,rgba(15,19,14,.98) 41% 65%,transparent 66%)}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:52px;align-items:end;padding:150px 0 96px}
.kicker,.section-label{text-transform:uppercase;letter-spacing:.16em;color:var(--sand);font-size:.73rem;font-weight:850;margin:0}
.kicker::before,.section-label::before{content:"";display:inline-block;width:28px;height:1px;background:currentColor;vertical-align:middle;margin-right:10px;opacity:.75}
h1,h2{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:clamp(3.7rem,9.2vw,7.7rem);line-height:.89;margin:15px 0 24px}
.hero-lead{max-width:700px;color:#e0d9cc;font-size:clamp(1rem,1.8vw,1.2rem);margin:0 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.button{min-height:50px;padding:0 21px;border:1px solid var(--line);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;transition:.18s ease}.button:hover{transform:translateY(-2px)}
.button.primary{background:var(--sand);color:#1c1811;border-color:transparent}.button.ghost{background:rgba(255,255,255,.045)}
.privacy-card{justify-self:end;max-width:340px;display:flex;gap:13px;padding:18px 19px;background:rgba(13,16,12,.26);backdrop-filter:blur(9px);border-left:2px solid rgba(225,183,104,.65);border-radius:0 16px 16px 0;color:#d5cebf}.privacy-card p{margin:3px 0 0;font-size:.9rem;color:#bfb8ab}.privacy-icon{color:var(--sand);font-size:1.3rem}
.intro{padding:74px 0;border-bottom:1px solid var(--line)}.intro-grid{display:grid;grid-template-columns:.55fr 1.45fr;gap:50px}.intro h2{font-size:clamp(2.4rem,5vw,4.2rem);line-height:1;margin:0 0 18px}.intro p:not(.section-label){max-width:760px;color:var(--muted);font-size:1.06rem}
.section{padding:92px 0}.section-heading{display:grid;grid-template-columns:1fr minmax(280px,460px);gap:36px;align-items:end;margin-bottom:28px}.section-heading h2,.about-grid h2,.discover-grid h2{font-size:clamp(2.3rem,5vw,4.2rem);line-height:1;margin:9px 0 0}.section-heading>p{margin:0;color:var(--muted)}
.filter-row{display:flex;gap:9px;overflow-x:auto;padding:1px 1px 15px;scrollbar-width:none}.filter-row::-webkit-scrollbar{display:none}.filter{flex:none;min-height:40px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);color:#d9d3c7;font-weight:750;cursor:pointer}.filter.active{background:var(--text);color:#151711;border-color:transparent}
.sound-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.sound-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.046),rgba(255,255,255,.018));box-shadow:var(--shadow)}
.card-visual{aspect-ratio:16/9;position:relative;background:linear-gradient(145deg,#69452f,#30362c 60%,#171a16)}.card-visual::after{content:"";position:absolute;inset:auto -5% -18%;height:62%;background:linear-gradient(165deg,transparent 0 38%,rgba(29,36,27,.86) 39% 60%,transparent 61%)}
.card-visual.storm{background:linear-gradient(150deg,#2b3340,#544c3c 55%,#1a1e19)}.card-visual.wind{background:linear-gradient(150deg,#7c5b3e,#3d4435 60%,#181b16)}.card-visual.dawn{background:linear-gradient(150deg,#936345,#525245 60%,#20251d)}.card-visual.night{background:radial-gradient(circle at 73% 20%,#d9d0aa 0 2%,transparent 3%),linear-gradient(150deg,#18202d,#1c2a2d 60%,#111510)}.card-visual.rain{background:linear-gradient(150deg,#36434a,#595546 58%,#19201a)}
.visual-label{position:absolute;z-index:2;left:15px;top:15px;padding:6px 9px;border-radius:999px;background:rgba(12,15,12,.56);border:1px solid var(--line);backdrop-filter:blur(7px);font-size:.67rem;letter-spacing:.08em;text-transform:uppercase}
.card-body{padding:20px}.meta{margin:0 0 7px;color:var(--sand);font-size:.68rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase}.card-body h3{font-size:1.23rem;margin:0 0 7px}.card-body>p:not(.meta){color:var(--muted);font-size:.93rem;min-height:44px}
.media-placeholder{margin-top:16px;min-height:42px;display:flex;align-items:center;padding:9px 11px;border-radius:12px;border:1px dashed var(--line2);color:#9f9a90;background:rgba(255,255,255,.02);font-size:.74rem;overflow-wrap:anywhere}
.editor-note{margin-top:22px;padding:18px 20px;border:1px solid rgba(225,183,104,.18);background:rgba(225,183,104,.045);border-radius:16px;color:#cfc8bb;font-size:.92rem}.editor-note strong{color:var(--text)}
.feature-section{padding-top:32px}.feature{display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:var(--shadow)}.feature-art{min-height:455px;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 75% 21%,rgba(229,185,101,.42),transparent 8rem),linear-gradient(145deg,#734a31,#353d30 60%,#171a16)}.feature-art::after{content:"";position:absolute;inset:auto -3% -12%;height:55%;background:linear-gradient(165deg,transparent 0 38%,#242b21 39% 61%,transparent 62%)}.feature-badge{position:absolute;z-index:2;top:18px;left:18px;font-size:.67rem;letter-spacing:.12em;font-weight:900;background:rgba(12,15,12,.6);padding:7px 10px;border-radius:999px;border:1px solid var(--line)}.play-icon{position:relative;z-index:2;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:rgba(16,19,15,.58);backdrop-filter:blur(8px);border:1px solid var(--line2);padding-left:4px;font-size:1.35rem}
.feature-copy{padding:42px;display:flex;flex-direction:column;justify-content:center}.feature-copy h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1;margin:9px 0 18px}.feature-copy p{color:var(--muted)}.small-note{font-size:.86rem}
.photo-grid{display:grid;grid-template-columns:1.3fr .85fr .85fr;grid-auto-rows:235px;gap:14px}.photo-card{margin:0;position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--line);background:#252a22}.photo-large{grid-row:span 2}.photo-placeholder{height:100%;background:linear-gradient(145deg,#724a31,#343b30 62%,#171a16)}.photo-sunset{background:radial-gradient(circle at 73% 22%,rgba(236,193,105,.65),transparent 6rem),linear-gradient(145deg,#8a5636,#4e4736 58%,#1e251d)}.photo-wildlife{background:linear-gradient(145deg,#695037,#3f4838 64%,#1a1e18)}.photo-storm{background:linear-gradient(145deg,#303a43,#554f40 64%,#171d18)}.photo-night{background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.6) 0 1px,transparent 2px),radial-gradient(circle at 70% 32%,rgba(255,255,255,.45) 0 1px,transparent 2px),linear-gradient(145deg,#171d2b,#15211e 70%,#0d110d)}.photo-landscape{background:linear-gradient(145deg,#765038,#3d4535 60%,#171a15)}.photo-card figcaption{position:absolute;inset:auto 0 0;padding:38px 17px 16px;background:linear-gradient(to top,rgba(8,10,8,.86),transparent);font-weight:760}
.about-section{border-top:1px solid var(--line)}.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px}.about-copy{color:var(--muted);font-size:1.04rem}.location-box{margin-top:24px;padding:21px 22px;border-radius:16px;border:1px solid rgba(225,183,104,.18);background:rgba(225,183,104,.045);color:#d9d2c5}.location-box p{margin:6px 0 0}
.discover-section{padding:74px 0;background:linear-gradient(100deg,rgba(168,95,61,.14),rgba(225,183,104,.045));border-block:1px solid var(--line)}.discover-grid{display:grid;grid-template-columns:1fr .8fr;gap:40px;align-items:end}.discover-grid>p{color:var(--muted);font-size:1.06rem}
footer{padding:42px 0 calc(44px + env(safe-area-inset-bottom));color:var(--muted)}.footer-grid{display:grid;grid-template-columns:1fr auto auto;gap:45px;align-items:start}.footer-brand{color:var(--text);font-weight:850}.footer-grid p{margin:7px 0 0;font-size:.9rem}.footer-grid nav{display:grid;gap:8px;font-size:.9rem}.footer-grid nav a:hover{color:var(--sand)}.footer-meta{display:grid;gap:8px;text-align:right;font-size:.86rem}
.mobile-dock{display:none}
@media(max-width:940px){
  .desktop-nav{display:none}.menu-button{display:block}.hero-inner,.section-heading,.feature,.about-grid,.intro-grid,.discover-grid{grid-template-columns:1fr}.privacy-card{justify-self:start;max-width:480px}.sound-grid{grid-template-columns:1fr 1fr}.photo-grid{grid-template-columns:1fr 1fr}.photo-large{grid-row:auto;grid-column:span 2;min-height:350px}.footer-grid{grid-template-columns:1fr 1fr}.footer-meta{text-align:left}.mobile-dock{display:grid;position:fixed;z-index:45;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));grid-template-columns:repeat(4,1fr);min-height:60px;background:rgba(22,26,20,.91);backdrop-filter:blur(18px) saturate(140%);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.mobile-dock a{min-height:60px;display:grid;place-items:center;align-content:center;gap:2px;font-size:.9rem}.mobile-dock small{font-size:.68rem;color:#c7c1b5}footer{padding-bottom:calc(116px + env(safe-area-inset-bottom))}
}
@media(max-width:620px){
  .shell{width:calc(100% - 24px)}.nav{height:64px}.mobile-menu{top:64px}.hero-inner{padding:118px 0 74px}.hero{min-height:88svh}h1{font-size:clamp(3.55rem,17vw,5.2rem)}.hero-actions .button{width:100%}.section{padding:68px 0}.intro{padding:58px 0}.sound-grid,.photo-grid{grid-template-columns:1fr}.photo-large{grid-column:auto;min-height:300px}.photo-grid{grid-auto-rows:220px}.feature-art{min-height:320px}.feature-copy{padding:28px 22px}.footer-grid{grid-template-columns:1fr}.footer-meta{text-align:left}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}


/* Big Bend Wild simplified launch layout */
.simple-brand img{height:58px;width:auto;display:block}
.simple-hero{
  position:relative;
  min-height:88svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:
    radial-gradient(circle at 76% 18%,rgba(239,190,104,.28),transparent 12rem),
    linear-gradient(145deg,#72482f 0%,#42392d 38%,#20271d 70%,#10130f 100%);
}
.simple-hero::before{
  content:"";
  position:absolute;
  inset:auto -8% -6%;
  height:44%;
  background:linear-gradient(166deg,transparent 0 36%,rgba(36,44,33,.9) 37% 59%,transparent 60%);
}
.simple-hero::after{
  content:"";
  position:absolute;
  inset:auto -6% -13%;
  height:35%;
  background:linear-gradient(198deg,transparent 0 39%,rgba(14,18,13,.98) 40% 64%,transparent 65%);
}
.simple-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(12,14,11,.08),rgba(12,14,11,.55) 70%,rgba(12,14,11,.88));
}
.simple-hero-inner{position:relative;z-index:2;padding:132px 0 82px}
.simple-hero-copy{max-width:760px}
.hero-logo{
  width:min(520px,82vw);
  height:auto;
  display:block;
  margin:0 0 24px;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.28));
}
.simple-hero h1{
  font-size:clamp(2.7rem,6vw,5.4rem);
  line-height:.96;
  margin:12px 0 18px;
  max-width:760px;
}
.compact-heading{margin-bottom:24px}
.four-up{grid-template-columns:repeat(2,1fr)}
.simple-photo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.simple-photo-grid .photo-card{min-height:280px}
.photo-section-simple{padding-top:62px}
.mobile-dock.three{grid-template-columns:repeat(3,1fr)}

@media(max-width:940px){
  .simple-brand img{height:52px}
  .four-up{grid-template-columns:1fr 1fr}
  .simple-photo-grid{grid-template-columns:1fr 1fr}
  .simple-photo-grid .photo-card:first-child{grid-column:span 2;min-height:340px}
}
@media(max-width:620px){
  .simple-brand img{height:44px}
  .simple-hero{min-height:82svh}
  .simple-hero-inner{padding:104px 0 64px}
  .hero-logo{width:min(430px,94vw);margin-bottom:20px}
  .four-up,.simple-photo-grid{grid-template-columns:1fr}
  .simple-photo-grid .photo-card:first-child{grid-column:auto;min-height:280px}
}


/* Logo sizing revision:
   Larger, readable header identity; no duplicate oversized hero logo. */
.site-header .nav{
  height:100px;
}
.simple-brand{
  align-self:stretch;
  display:flex;
  align-items:center;
}
.simple-brand img{
  height:94px;
  width:auto;
  max-width:330px;
  object-fit:contain;
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.2));
}
.site-header.scrolled .simple-brand img{
  height:82px;
}
.mobile-menu{
  top:100px;
}
.simple-hero-inner{
  padding-top:155px;
}

@media(max-width:940px){
  .site-header .nav{height:84px}
  .simple-brand img{height:78px;max-width:270px}
  .site-header.scrolled .simple-brand img{height:72px}
  .mobile-menu{top:84px}
  .simple-hero-inner{padding-top:130px}
}
@media(max-width:620px){
  .site-header .nav{height:74px}
  .simple-brand img{height:68px;max-width:225px}
  .site-header.scrolled .simple-brand img{height:62px}
  .mobile-menu{top:74px}
  .simple-hero-inner{padding-top:116px}
}

.sound-player {
  width: 100%;
  height: 42px;
  margin-top: 16px;
  display: block;
}

.bird-photo {
  margin: 14px 0 16px;
}

.bird-photo img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 12px;
}

.bird-photo figcaption {
  margin-top: 7px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted);
}

.bird-photo figcaption a {
  color: var(--sand);
  text-decoration: none;
}

.bird-photo figcaption a:hover {
  text-decoration: underline;
}

.sound-player {
  width: 100%;
  margin-top: 16px;
}

/* Actual bird image inside sound-card image area */
.card-visual.bird-image {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #1b2119;
}

.card-visual.bird-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Keep label visible over photo */
.card-visual.bird-image .visual-label {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 5;
}

/* Remove decorative fake mountain overlay from real photos */
.card-visual.bird-image::after {
  display: none;
}

.sound-player {
  width: 100%;
  display: block;
  margin-top: 16px;
}

.photo-credit {
  margin-top: 10px !important;
  min-height: 0 !important;
  font-size: 0.70rem !important;
  line-height: 1.4;
  color: var(--muted);
}

.photo-credit a {
  color: var(--sand);
}

.photo-credit a:hover {
  text-decoration: underline;
}

.birdnet-note {
  margin-top: 28px;
  padding: 18px 20px;
  border-left: 3px solid var(--sand);
  border-radius: 0 14px 14px 0;
  background: rgba(225, 183, 104, 0.05);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.birdnet-note strong {
  color: var(--text);
}

.birdnet-note p {
  margin: 5px 0 0;
}

.birdnet-note a {
  color: var(--sand);
  font-weight: 700;
}

.birdnet-note a:hover {
  text-decoration: underline;
}

/* Real photos in photo gallery - fixed sizing */
.simple-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 100%;
}

.simple-photo-grid .photo-card {
  width: 100%;
  height: 280px;
  min-width: 0;
  min-height: 0 !important;
  max-width: 100%;
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.simple-photo-grid .photo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.simple-photo-grid .photo-card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 38px 16px 14px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85),
    transparent
  );
  color: white;
  font-weight: 700;
}

@media (max-width: 940px) {
  .simple-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .simple-photo-grid .photo-card,
  .simple-photo-grid .photo-card:first-child {
    height: 280px;
    min-height: 0 !important;
    grid-column: auto;
  }
}

@media (max-width: 620px) {
  .simple-photo-grid {
    grid-template-columns: 1fr;
  }

  .simple-photo-grid .photo-card,
  .simple-photo-grid .photo-card:first-child {
    width: 100%;
    height: 240px;
    min-height: 0 !important;
    grid-column: auto;
  }
}