html {
    box-sizing : border-box;
    }
    *, *:before, *:after {
    box-sizing : inherit;
    transition : all 0.25s ease-in;
    }
    body {
    background : brown;
    min-height : 100vh;
    margin : 0;
    }
    .demo-wrapper {
    max-width : 960px;
    width : 96%;
    margin : auto;
    min-height : 100vh;
    background : white;
    }
    .demo-header {
    text-align : center;
    padding : 10px;
    background : lightsteelblue;
    }
    .demo-footer {
    display : flex;
    background : lightsteelblue;
    }
    .demo-footer a:first-child {
    margin : 0 auto 0 0;
    }
    .demo-footer a {
    line-height : 2;
    padding : 0 0.5em;
    color : rgb(162, 255, 0);
    }
    .cards {
    display : flex;
    flex-wrap : wrap;
    list-style : none;
    padding : 0;
    }
    .cards .card {
    flex : 0 0 calc(100% - 20px);
    display : flex;
    margin : 10px;
    min-width : 0;
    background : lightblue;
    }
    .cards .card-link {
    text-decoration : none;
    color : inherit;
    display : flex;
    flex-direction : column;
    flex : 0 0 100%;
    }
    .cards .card-figure {
    position : relative;
    margin : 0;
    line-height : 0;
    overflow : hidden;
    }
    .cards .card-figure-image {
    width : 100%;
    height : 200px;
    object-fit : cover;
    transform-origin : 80% 12%;
    transform : rotate(0) scale(1);
    transition : all 2s;
    filter : grayscale(100);
    }
    .cards .card-figure-caption {
    padding : 0 10px;
    }
    .cards .card-link:hover .card-figure-image {
    transform : rotate(6deg) scale(2);
    filter : grayscale(0);
    }
    .cards .card-figure-caption {
    position : absolute;
    left : 0;
    right : 0;
    bottom : 0;
    background : hsl(228 3% 34% / 0.5);
    color : rgb(196, 156, 156);
    backdrop-filter : blur(5px);
    line-height : 2;
    font-style : italic;
    }
    .cards .card-section {
    flex-grow : 1;
    display : flex;
    flex-direction : column;
    padding : 10px;
    background-color : lightcoral;
    }
    .cards .card-section-title {
    margin-bottom : 0;
    border-bottom : 1px solid;
    }
    .cards .card-section-meta {
    display : flex;
    flex-wrap : wrap;
    }
    .cards .card-section-meta * {
    flex : 0 0 50%;
    font-size : 0.8em;
    line-height : 2;
    }
    .cards .card-section-meta :nth-child(even) {
    text-align : right;
    }
    .cards .card-section-excerpt {
    flex-grow : 1;
    }
    .cards .card-section-button {
    align-self : flex-end;
    margin : 10px;
    padding : 0 1em;
    border-radius : 0.5em;
    border : solid 1px;
    line-height : 2;
    }
    @media (min-width: 768px) {
    .cards .card {
    flex : 0 0 calc(25% - 20px);
    flex : 0 0 calc(33.333% - 20px);
    flex : 0 0 calc(50% - 20px);
    }
    }
    html {
    box-sizing : border-box;
    }
    *, *::before, *::after {
    box-sizing : inherit;
    }
    body {
    margin : 0;
    }
    ul {
    list-style : none;
    background-color : #ff0303;
    color : white;
    margin : 25px;
    padding-right : 750px;
    }
    main {
    width : 98%;
    max-width : 960px;
    margin : 0 auto;
    }
    .callout {
    font-family : sans-serif;
    background : linear-gradient(to right, #0756b0 0%, #4530a8 80%);
    padding : 12px;
    }
    .callout-heading {
    color : white;
    font-size : 3em;
    text-transform : uppercase;
    margin : 0 0 32px;
    }
    .callout-intro {
    color : white;
    font-size : 1.5em;
    margin : 0 0 16px;
    }
    .subscribe-newsletter {
    --color-white-20 : hsl(0 0% 100% / 0.20);
    --color-white-40 : hsl(0 0% 100% / 0.40);
    --color-white-60 : hsl(0 0% 100% / 0.60);
    --color-white-80 : hsl(0 0% 100% / 0.80);
    --color-black-20 : hsl(0 0% 0% / 0.20);
    --color-black-40 : hsl(0 0% 0% / 0.40);
    --color-black-60 : hsl(0 0% 0% / 0.60);
    --color-black-80 : hsl(0 0% 0% / 0.80);
    --color-button-dark : hsl(266 47% 30% / 1.00);
    --color-button-light : hsl(54 86% 58% / 1.00);
    --z-index : -1;
    }
    .subscribe-newsletter {
    transition : all 1s ease-in;
    background : var(--color-white-20);
    border-radius : 0.5em;
    }
    .subscribe-newsletter {
    display : flex;
    flex-direction : column;
    justify-content : center;
    align-items : stretch;
    overflow : hidden;
    }
    .subscribe-newsletter fieldset {
    position : relative;
    display : flex;
    flex-direction : column;
    justify-content : center;
    padding : 0;
    margin : 0;
    border : none;
    }
    .subscribe-newsletter fieldset:first-child {
    flex : 1 1 auto;
    }
    .subscribe-newsletter fieldset:last-child::after {
    content : "";
    position : absolute;
    width : 100%;
    height : 100%;
    background : url("images/Yin\ and\ Yang.gif") center no-repeat;
    z-index : var(--z-index, -1);
    }
    .subscribe-newsletter input:not([type="radio"]):not([type="checkbox"]) {
    appearance : none;
    border : none;
    border-radius : 0;
    }
    .subscribe-newsletter input {
    position : relative;
    font-family : inherit;
    font-size : 1.2em;
    line-height : 2.4;
    letter-spacing : 0.05em;
    padding : 0 0.5em;
    margin : 0;
    color : var(--color-button-dark);
    }
    .subscribe-newsletter input[type="email"] {
    background : var(--color-white-60);
    }
    .subscribe-newsletter input[type="email"]:focus {
    outline : none;
    box-shadow : 0 0 0 2px var(--color-button-dark) inset;
    }
    .subscribe-newsletter input::placeholder {
    position : relative;
    color : var(--color-button-dark);
    opacity : 0.4;
    }
    .subscribe-newsletter input::placeholder {
    transition : 2s cubic-bezier(1,1.65,0.35,1.32), opacity 0.25s ease;
    }
    .subscribe-newsletter input:focus::placeholder {
    transform : translateX(100%);
    transition : transform 1s cubic-bezier(0.15,0.69,0.7,-0.42), opacity 2s ease;
    opacity : 0;
    }
    .subscribe-newsletter input[type="submit"], .subscribe-newsletter input[type="submit"]:invalid {
    background : var(--color-button-dark);
    color : white;
    font-weight : bold;
    text-transform : uppercase;
    padding : 0 1em;
    transition : all 1s 0.5s ease-in;
    transform-origin : right center;
    transform : scale(1);
    box-shadow : 0 0 0 0 var(--color-black-60);
    }
    .subscribe-newsletter:valid input[type="submit"] {
    color : var(--color-button-dark);
    background : var(--color-button-light);
    transform : scale(1);
    box-shadow : -2px 2px 4px var(--color-black-60), -2px -2px 4px var(--color-black-60);
    }
    .subscribe-newsletter fieldset input[type="submit"]:disabled {
    background : var(--color-white-80);
    color : black;
    transform : scale(1);
    box-shadow : 0 0 0 0 var(--color-black-60);
    }
    .subscribe-newsletter label {
    color : var(--color-white-80);
    line-height : 1.625em;
    padding : 0 0.5em;
    }
    .subscribe-newsletter.sending {
    background : var(--color-white-60);
    }
    .subscribe-newsletter.received {
    background : var(--color-white-20);
    }
    .subscribe-newsletter .subscribe-newsletter-message-error {
    background : var(--color-button-dark);
    }
    .subscribe-newsletter .subscribe-newsletter-message-success {
    background : var(--color-white-80);
    color : var(--color-button-dark);
    font-size : 1.6em;
    flex : 1;
    text-align : center;
    }
    @media (min-width: 768px) {
    .callout {
    padding : 80px;
    }
    .subscribe-newsletter {
    flex-direction : row;
    height : 8em;
    align-items : center;
    }
    .subscribe-newsletter:valid input[type="submit"] {
    transform : scale(1.2);
    }
    .subscribe-newsletter fieldset:last-child::after {
    content : "";
    position : absolute;
    width : 100%;
    height : 100%;
    background : url("images/Yin\ and\ Yang.gif") center no-repeat;
    z-index : var(--z-index, -1);
    }
    }