@import url("base_theme.css");

.content {
    display: grid;
    grid-template-columns: 45% 45%;
    grid-column-gap: 10%;
    grid-row-gap: 30px;
    margin-block: 5rem 5rem;
    margin-inline: auto;
    text-align: left;
    width: 100%;
}

.content:has(.empty-list) {
    display: block;
}

.empty-list {
    font-size: 1.5rem;
    padding-top: 40px;
    padding-bottom: 80px;
    text-align:center;
    width:100%;
}

article {
    border: 1px solid #ccc;

    figure {
        height: 280px;
        margin: 0;

        img {
            height: 100%;
            object-fit: cover;
            width: 100%;
        }
    }

    .info {
        padding-left: 5px;
        text-align: left;

        p {margin: 8px 5px auto auto;}

        .title {
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .description {line-height: 20px;}

        .ellipsis {
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            height:100px;
            overflow: hidden;
            text-overflow:ellipsis;
        }
    }

    .btns {
        display: grid;
        margin-top: 20px;
        text-align: center;

        .btnDetails {
            background-color: #fff!important;
            border: 1px solid #ccc;
            cursor: pointer;
            font-family: sans-serif;
            font-size: 1.1rem;
            letter-spacing: 2px;
            margin:auto;
            padding: 10px;
            text-transform: uppercase;
            width: 100px;
        }
    }
}

@media only screen and (max-width: 840px) {
    .content {
    	display: block;
    	text-align:center;
    	width: 350px;
    }

    article {
		display: block;
		margin:auto auto 30px auto;
	}
}

@media only screen and (max-width: 420px) {
    .content {width: 100%;}
    article figure {width: 100%;}
}

@media only screen and (max-width: 300px) {
	#wrapper {
        width:95%;
        overflow:hidden;
    }

    article .btns {
		grid-template-columns: 100%;
		row-gap: 20px;
	}
}