b/* =========================================================
   websites.css
   Websites page layout
   2 x 2 flex card grid
   Button styling lives in ug.css (uses .portfolio-link)
   Dreamweaver-safe
   ========================================================= */

.websites-intro{
  margin-top:4px;
  margin-bottom:18px;
}

.websites-intro p{
  margin:0;
}

/* --- 2 x 2 wrapper --- */
.websites-list{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:42px 48px;
  align-items:flex-start;
  justify-content:center;
}

/* --- Each card --- */
.site-row{
  width:calc(50% - 24px);
  max-width:500px;
  display:flex;
  flex-direction:column;
  padding:0;
  border-bottom:none;
}

.site-row:last-child{
  border-bottom:none;
}

/* --- Image --- */
.site-media{
  width:100%;
  flex:0 0 auto;
}

.site-thumb-link{
  display:block;
}

.site-img{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
    border:1px solid #CCC;

}

.site-thumb-link:hover .site-img{
  opacity:.90;

}

/* --- Text --- */
.site-body{
  flex:1 1 auto;
  min-width:0;
  padding-top:16px;
}

.site-url{
  margin-bottom:10px;
  font-size:.95em;
  opacity:.8;
}

.site-copy{
  margin:0;
  max-width:none;
  font-size:.94rem;
  line-height:1.58;
}

/* --- Visit button --- */
.site-link{
  float:none;
  display:inline-block;
  margin-top:16px;
  margin-left:0;
}

/* --- Rule inside flex list --- */
.websites-list > .rule{
  width:100%;
  flex:0 0 100%;
}

/* --- Back button wrapper --- */
.websites-back{
  text-align:center;
  margin:2.5rem 0 0;
}

/* =========================================================
   Mobile: single column
   ========================================================= */

@media (max-width:780px){

  .websites-list{
    display:block;
  }

  .site-row{
    width:100%;
    max-width:none;
    margin-bottom:34px;
  }

  .site-body{
    text-align:center;
  }

  .site-link{
    margin:14px auto 0;
  }
}