.session {
  position: relative;
  overflow: hidden;
  border: 2px solid #dddddd;
  border-radius: 1rem;
  padding: 1rem;
  background-color: white;
}

.session__conditions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "header header header"
    "wave   wind   cloud";
  gap: 0.25rem 1rem;
}

.session__conditions-header {
  grid-area: header;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.session__name {
  font-weight: 700;
  font-size: 0.95rem;
}

.session__date {
  font-size: 0.8rem;
  color: var(--secondary-text-color, #666);
}

.session__conditions-wave  { grid-area: wave; }
.session__conditions-wind  { grid-area: wind; }
.session__conditions-cloud { grid-area: cloud; }

.session__conditions-wave,
.session__conditions-wind,
.session__conditions-cloud {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.session__conditions-value {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
}

.session__conditions-direction {
  line-height: 1;
}

.session__alert-name {
  color: var(--secondary-text-color, #666);
}

.session--today {
  border-color: var(--color-primary) !important;
}

.session__link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-indent: -9999px;
  z-index: 512;
}