.featured-image {
--featured-image-height-standard: 300px;
--featured-image-height-large: 500px;
--featured-image-height-small: 200px;
--featured-content-max-width: 500px;
--overlay-colour-start: rgba(13, 60, 99, 0.9);
--overlay-colour-end: rgba(13, 60, 99, 0);
}
.featured-image {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.featured-image > div.wrap {
min-height: var(--featured-image-height-standard);
}
.featured-image.featured-image-size-large > div.wrap {
min-height: var(--featured-image-height-large);
}
.featured-image.featured-image-size-small > div.wrap {
min-height: var(--featured-image-height-small);
}
.featured-image > div.wrap {
display: flex;
align-items: center;
justify-content: center;
}
.feature-image-content {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--featured-content-max-width);
text-align: center;
}
.feature-image-content * {
color: var(--idc-colour-white);
}
.feature-image-content h1,
.feature-image-content h1 strong {
font-weight: var(--font-weight-bold);
}
.featured-image .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 30%;
z-index: 0;
background: linear-gradient(var(--overlay-colour-start), var(--overlay-colour-end));
max-width: none;
}
@media screen and (max-width: 1000px) {
.featured-image {
--featured-image-height-standard: 300px;
--featured-image-height-large: 350px;
--featured-image-height-small: 150px;
--featured-content-max-width: 300px;
}
}
@media screen and (max-width: 781px) {
.featured-image .wp-block-buttons a.wp-element-button {
display: inline-block;
width: auto;
}
}.projects-list-filter-container {
margin-bottom: var(--container-gap);
}
.projects-list-filter-container p {
font-weight: var(--font-weight-bold);
font-size: var(--font-size-h6);
color: var(--idc-colour-dark-blue);
}
.projects-list-filter-container select {
margin-left: 20px;
background: url(//idcaus.com/wp-content/themes/idc-custom/assets/images/common/arrow-select.png) center right 15px no-repeat var(--idc-colour-white);
background-size: 10px 10px;
border: 1px solid var(--idc-colour-light-blue);
border-radius: var(--box-border-radius);
padding: 10px 15px;
padding-right: 40px;
-webkit-appearance: none;
appearance: none;
}
.projects-list-container {
display: grid;
gap: var(--container-gap);
grid-template-columns: repeat(3, 1fr);
}
.projects-list-item .image {
display: block;
width: 100%;
height: auto;
padding: 22% 0;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
border-top-left-radius: var(--box-border-radius);
border-top-right-radius: var(--box-border-radius);
}
.projects-list-item .project-list-item-content {
padding: var(--box-padding);
background: var(--idc-colour-white);
border-bottom-left-radius: var(--box-border-radius);
border-bottom-right-radius: var(--box-border-radius);
}
.projects-list-item .project-list-item-content h4 a {
color: var(--idc-colour-dark-blue);
text-decoration: none;
}
.projects-list-item .project-list-item-content h4 {
font-weight: var(--font-weight-bold);
}
.projects-list-item .project-list-item-content h4 .spacer,
.projects-list-item .project-list-item-content h4 .location {
font-weight: var(--font-weight-medium);
font-size: var(--font-size-p);
}
.projects-list-item .project-list-item-content h4 .spacer {
color: var(--idc-colour-light-blue);
font-weight: var(--font-weight-light);
margin: 0 5px;
}
@media screen and (max-width: 1200px) {
.projects-list-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 800px) {
.projects-list-container {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 781px) {
.projects-list-filter-container span {
display: block;
margin-bottom: 10px;
}
#idc-filter-service {
margin: 0;
width: 100%;
}
.projects-list-container a.button {
display: block;
text-align: center;
}
}