#ex1 {
    .wrapper {
        display: flex;
        align-items: flex-start;
    }

    .wrapper>* {
        margin: 20px;
    }

    .box {
        border: 5px solid darkblue;
        width: 200px;
    }

    img {
        max-width: 100%
    }
}

#ex2 {
    .wrapper {
        display: flex;
        align-items: flex-start;
    }

    .wrapper>* {
        margin: 20px;
    }

    .box {
        border: 5px solid darkblue;
        width: 200px;
        height: 200px;
    }

    img {
        height: 100%;
        width: 100%;
    }

    .cover {
        object-fit: cover;
    }

    .contain {
        object-fit: contain;
    }

    .fill {
        object-fit: fill;
    }
}

#ex3 {
    .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 100px 100px;
        gap: 20px;
    }

    .wrapper>div {
        background-color: rebeccapurple;
        border-radius: 0.5em;
    }
}

#ex4 {

    input[type="text"],
    input[type="email"] {
        border: 2px solid #000;
        margin: 0 0 1em 0;
        padding: 10px;
        width: 80%;
    }

    input[type="submit"] {
        border: 3px solid #333;
        background-color: #999;
        border-radius: 5px;
        padding: 10px 2em;
        font-weight: bold;
        color: #fff;
    }

    input[type="submit"]:hover,
    input[type="submit"]:focus {
        background-color: #333;
    }
}