:root{
  --card-bg: rgba(255,255,255,.88);
  --radius:18px;
  --font:"Montserrat",sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:var(--font);
  background:url("./bg3.png") center/cover no-repeat fixed;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.25);
  z-index:-1;
}

/* GRID */
.layout{
  position:absolute;
  inset:5%;
  display:grid;
  gap:28px;

  grid-template-columns: 34% 22% 44%;
  grid-template-rows: 120px 1fr 150px;

  grid-template-areas:
    "weather feature feature"
    "news feature feature"
    "news dt logo";
}

/* WEATHER */
.weather-row{grid-area:weather;display:flex;gap:12px}

.wbox{
  flex:1;
  background:var(--card-bg);
  border-radius:var(--radius);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-weight:800;
}

.wday{font-size:20px}

.wico{
  width:56px;
  height:56px;
  margin-top:10px;
  display:block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.18));
}

.wtemp{
  font-size:20px;
  font-weight:900;
  margin-top:6px;
}

/* FEATURE */
.feature-card{
  grid-area:feature;
  background:var(--card-bg);
  border-radius:var(--radius);
  padding:20px;
}

.feature-title-big{
  font-size:26px;
  font-weight:900;
}

.open-row{
  display:flex;
  justify-content:space-between;
  padding:10px;
  border-radius:12px;
  background:rgba(255,255,255,.7);
  margin-top:8px;
  font-weight:900;
}

/* NEWS */
.news-card{
  grid-area:news;
  background:var(--card-bg);
  border-radius:var(--radius);
  padding:20px;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.news-media{
  margin-top:14px;
  border-radius:14px;
  overflow:hidden;
  min-height:180px;
}

.news-media img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:none;
}

.news-content{
  margin-top:15px;
  overflow:hidden;
  font-weight:600;
  line-height:1.5;
}

.news-meta{
  margin-top:10px;
  font-size:12px;
  font-weight:800;
  opacity:.6;
}

/* DATE */
.dt-card{
  grid-area:dt;
  background:var(--card-bg);
  border-radius:var(--radius);
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
}

.dt-card::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:2px;
  height:65%;
  background:rgba(0,0,0,.15);
}

.dt-day{font-size:50px;font-weight:900}
.dt-month{font-size:16px;font-weight:800;opacity:.6}
.dt-time{font-size:38px;font-weight:900}

/* LOGO */
.logo-plain{
  grid-area:logo;
  display:flex;
  align-items:center;
  justify-content:center;
}