.show-and-tell-with-title {
    border-color: lightgrey;
    border-style: solid;
    border-width: 1px 0px 1px 0px;
    padding-top: var(--website-header-padding);
    padding-bottom: var(--website-header-padding);
    margin-left: 2vw;
    margin-right: 2vw;
}

.show-and-tell-title{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--product-page-title-size);
    /* font-size: var(--website-header-size); */
    padding-bottom: var(--website-header-padding);
}

.show-and-tell
{
    display: grid;
    grid-template-columns: 
            1fr 1fr 1fr; 
    align-items: center;
}

.show-and-tell>a 
{
    text-decoration: none;
    color: var(--colour-text-mid);
    height: 100%;
    display: flex;
    /* grid-template-rows: 4f 2fr; */
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    /* border:1px solid green; */
}
.show-and-tell>a >*
{
    /* border:1px solid red; */
}
.show-and-tell>a:hover
{
    color: black
}
.show-and-tell>a>.image 
{
    object-fit: contain; 
    /* border:1px solid red; */
    max-width: 450px;
    /* height: 350px; */
    /* max-height: 8%; */
    /* height: 290px; */
    /* width: 250px; */
    width: auto;
    /* overflow: h; */
    /* width: 25vw; */

    overflow: hidden;

    filter: none; 
    -webkit-filter: blur(0px); 
    -moz-filter: blur(0px); 
    -ms-filter: blur(0px);
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}
.show-and-tell>a>.sat-image-name 
{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    padding-top: 10px;
    height: 25px;
}

@media screen and (max-width:1450px)
{
    .show-and-tell>a>.image 
    {
        max-width: 400px;
    }
}

@media screen and (max-width:1300px)
{
    .show-and-tell>a>.image 
    {
        max-width: 350px;
    }
}


@media (max-width:1100px)
{
    .show-and-tell-title 
    {
        padding: 20px 0px 50px 0px;
    }
    .show-and-tell
    {
        display: flex;
        flex-direction: column;
        gap:35px;
    }
    .show-and-tell>a 
    {
        /* height: 33%; */
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .show-and-tell>a>.image 
    {
        /* width: 75%;
        height: 225px; */
        width: 60%;

    }
}