.jet-weather {
&__title {
padding: 0;
margin: 0 0 15px;
}
&__current {
display: flex;
align-items: center;
justify-content: space-between;
}
&__current-temp,
&__current-icon-box {
flex: 0 1 auto;
max-width: 50%;
}
&__current-temp {
font-size: 4em;
}
&__current-icon-box {
text-align: center;
}
&__current-desc {
margin-top: 10px;
}
&__current-day,
&__forecast-day {
font-weight: 700;
}
&__details,
&__forecast {
font-size: 14px;
line-height: 1.5;
}
&__details {
display:-ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 5px;
row-gap: 5px;
align-items: center;
margin-top: 10px;
}
&__details-item {
display: flex;
align-items: center;
&:first-child {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-column-start: 1;
grid-column-end: 3;
}
&:nth-child(2) {
-ms-grid-column: 3;
}
&:nth-child(3) {
-ms-grid-column: 1;
-ms-grid-row: 2;
}
&:nth-child(4) {
-ms-grid-column: 2;
-ms-grid-row: 2;
}
&:nth-child(5) {
-ms-grid-column: 3;
-ms-grid-row: 2;
}
&:nth-child(6) {
-ms-grid-column: 1;
-ms-grid-row: 3;
}
&:nth-child(7) {
-ms-grid-column: 2;
-ms-grid-row: 3;
}
&:nth-child(8) {
-ms-grid-column: 3;
-ms-grid-row: 3;
}
.jet-weather-icon {
margin-right: 5px;
}
}
&__current-sunrise,
&__current-sunset {
text-transform: uppercase;
}
&__forecast {
margin-top: 15px;
}
&__forecast-item {
display: flex;
align-items: center;
margin-top: 5px;
}
&__forecast-day,
&__forecast-icon,
&__forecast-max-temp,
&__forecast-min-temp {
width: 25%;
}
&__forecast-icon,
&__forecast-max-temp,
&__forecast-min-temp {
text-align: center;
}
&-icon {
line-height: 1;
.jet-weather__current-icon & {
font-size: 60px;
}
.jet-weather__details-item &,
.jet-weather__forecast-icon & {
font-size: 1.5em;
}
svg {
width: auto;
max-width: 1.5em;
height: 1em;
vertical-align: top;
}
}
&-notice {
font-style: italic;
}
}