.q-listing-title{
height: 200px;
display: flex;
justify-content: center;
align-items: end;
background-size: cover;
background-position: center;
border-radius: 15px 15px 0 0;
background-color: var(--color-primary);
}
.q-listing-content h4 {
margin-top: 0;
height:60px;
}
.q-listing-content-wrap{
border-radius: 15px;
margin-top: -20px;
background-color: white;
position: relative;
}
.q-listing-arrow{
position: absolute;
bottom: 30px;
right: 30px;
color: var(--color-primary);
font-size: 50px;
transition: right 0.3s ease-out;
}
.q-listing-content {
padding: 30px;
height:290px;
}
.listing-col-tmp {
width: 30%;
pointer-events: none;
transition: scale 0.3s ease;
filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.1));
margin-bottom: 5%;
}
.listing-col-tmp:hover {
scale:1.05;
}
.listing-col-tmp:hover .q-listing-arrow{
right: 20px;
}
.listing-container {
display: flex;
justify-content: left;
width: 100%;
gap: 5%;
flex-wrap: wrap;
margin: 5vh 0;
}
.listing-info span, .listing-info {
color: #333333;
}
.listing-info {
display: flex;
gap: 15px;
}
.listing-col-tmp a{
text-decoration: none;
pointer-events: auto;
}
.listing-col-tmp small{
font-size: x-small!important;
}
.q-listing-icon {
width: 24px;
padding-right: 8px;
color: var(--color-primary);
}
.listing-info svg{
color: var(--color-primary);
}
@media screen and (max-width:1192px){
#listing-archive .listing-col-tmp {
width: 47.5%;
}
}
@media screen and (max-width:762px){
#listing-archive .listing-col-tmp {
width: 100%;
}
} #event-archive{
padding: 30px; container-type: inline-size; container-name: eventgetcont;
}
.q-event-a {
text-decoration: none;
color: black;
border-bottom: 1px solid #ddd;
display: block;
}
.q-event-a:hover{
color: black;
}
.q-event-row {
display: flex;
flex-direction: row;
background-color: white;
}
.q-event-a:last-of-type{
border-bottom: none;
}
.q-event-row:hover {
filter: contrast(0.9);
}
.q-event-row {
transition: all 0.2s ease-in-out ;
height: 145px;
}
.q-event-cont { max-width: initial;
width: 100%;
}
.q-event-date-time{
display: flex;
flex-wrap: wrap;
width: 20%;
align-items: center;
align-content: center;
}
.q-event-date, .q-event-time{
width: 100%;
height: fit-content;
text-align: center;
font-size: 1.3em;
}
.q-event-date{
margin-bottom: 10px;
}
.q-event-details {
padding: 10px;
width: 70%;
font-size: medium;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.q-event-icon{
width: 10%;
justify-content: center;
display: flex;
align-items: center;
font-size: 50px;
}
.q-event-details h3{
margin-top: 10px;
margin-right:10px;
}
.q-event-details p{
margin: 0;
}
.q-event-row {
min-height: 100px;
}
.q-event-details-head {
display: flex;
align-items: center;
gap: 10px;
}
.q-event-cat{
padding: 0 10px;
border-radius: 5em;
}
.q-event-year{
padding: 5px 10px;
display: block;
font-size: 1.2em;
border-bottom:1px solid #ddd;
background-color: #f9f9f9;
}
.q-event-month{
padding: 5px 15px;
display: block;
font-size: 1em;
background-color: #fdfdfd;
border-bottom:1px solid #ddd;
}
@container eventgetcont (max-width: 900px) {
.q-event-date, .q-event-time{
font-size: 1em;
}
.q-event-details h3{
font-size: 1.7em;
margin-top: 10px;
}
.q-event-icon{
font-size: 35px;
}
}
@container eventgetcont (max-width: 550px) {
.q-event-row{
flex-direction: initial;
flex-wrap: wrap;
padding: 10px 0;
height: auto;
}
.q-event-details{
display: flex;
flex-direction: column;
width: 90%;
padding: 0 10px;
}
.q-event-details h3{
margin-top: 5px;
}
.q-event-date{
margin-bottom: 0;
}
.q-event-date-time{
width: 100%;
display: flex;
flex-wrap: nowrap;
}
.q-event-details-head{
flex-direction: column-reverse;
gap: 0;
align-items: flex-start;
}
.q-event-cat{
padding: 0;
color: #333333;
}
}