@import url("base_theme.css");
@import url("dialogs.css");
@import url("dialog_enquiry.css");

main {
    margin:30px auto;
    text-align:left;

    .bc {
        text-align:center;

        h2 {display: inline-block;}
    }

    .content {
        display: grid;
        font-size: 1.1rem;
        grid-template-columns: 300px auto;
        margin-top: 40px;
        margin-bottom: 60px;
        width: 100%;

        .image img {
            cursor: pointer;
            max-width:100%;
            object-fit: contain;
            width: 100%;
        }

        #thumbnails img {
            height: 100px;
            margin: 2px;
            object-fit: cover;
            width: 100px;
        }

        .info {
            padding-inline: 30px 5px;

            p:first-of-type {margin-top: 0;}
            .description {text-align: left; text-wrap-style: balance;}
            .label {color: #999990; font-weight: bold;}
            .btns {
                margin: 30px 5px 30px 0;

                a:hover {font-weight:bold;}
                .btn-enquire {
                    background-color: #d78f07;
                    border: 1px solid #d78f07;
                    color: #fff;
                    cursor: pointer;
                    font-family: courier;
                    letter-spacing: 2px;
                    margin:auto;
                    padding: 10px;
                    width: 100px;
                }
            }
        }
    }
}

@media only screen and (max-width: 640px) {
    main {
        .content {
            display: grid;
            grid-template-columns: 100%;
            row-gap: 20px;
            width: 100%;

            .info {padding-inline: 5px 5px;}
	   }
   }
}
@media only screen and (max-width:300px) {
	#wrapper {overflow: hidden;}
}