.button-widget03 {
    background-color:var(--navy);
    border:none;
    border-bottom-left-radius:0.5em;
    border-bottom-right-radius:0.5em;
    color:white;
    font-family: 'EB Garamond';
    font-size:1.2em;
    padding:0.5em 1em 0.5em 1em;
}


.button-widget03:hover {
    background-color:var(--red);
}


.button-widget03:hover:after {
    content: " ➞";
    transition: 1s;
}


.div-widget03-align {
    display:grid;
    grid-template-columns: 1fr;
    justify-items:center;
    width:100%;
}


.div-widget03-content {
    background-color:var(--beige);
    border-top-right-radius:0.5em;
    border-bottom-right-radius:0.5em;
    flex:1;
    margin-top:-2em;
    padding-top:1em 0 1em 0;
    width:95%;
}


.div-widget03-frame {
    aspect-ratio:0.75;
    width:100%;
}


.div-widget03-grid {
    grid-auto-rows: max-content;    
    grid-template-columns: 1fr 1fr 1fr 1fr;
}


.div-widget03-image {
    background-size:cover;
    border-radius:0.5em;
}


.div-widget03-item {
    display:flex;
    flex-direction:column;
    height:100%;
    max-width:300px;
}


.div-widget03-text {
    font-size:1.2em;
    margin:1em 0.5em 0 0.5em
}

.div-widget03-title {
    color:var(--navy);
    font-size:1.6em;
    font-weight:bold;
    margin-left:0 0.5em 0 0.5em;
}


@media only screen and (max-width: 1150px) { 
 
    .div-widget03-grid {
        grid-template-columns: 1fr 1fr 1fr;    
    }
}    


@media only screen and (max-width: 1000px) { 
 
    .div-widget03-grid {
       grid-template-columns: 1fr 1fr;    
    }
}    
    
@media only screen and (max-width: 720px) { 
    
    .div-widget03-content {
        width:285px;
    }    
    
    .div-widget03-frame {
        width:300px;
    }

    .div-widget03-grid {
       grid-template-columns: 1fr;    
    }
}