@media screen and ( width <= 768px ){
:root{
--headerHeight : 72px;
}
}
@media print , screen and ( width > 768px ){
:root{
--headerHeight : 147px;
}
}
.all_container{
@media print , screen and ( width > 768px ){
overflow-x : clip;
}
}
main{
padding-top : var( --headerHeight );
}
main.single-curner-box{
@media print , screen and ( width > 768px ){
max-width : 1160px;
.campus_main_container{
width : calc( 100% - 360px - 48px );
}
}
} .conte-box{
div[style*="text-align: center"]{
> a{
display : block;
width : fit-content;
margin-inline : auto;
}
}
} .campus_single_container .campus_sidebar_container{
background-color : transparent;
@media print , screen and ( width > 768px ){
width : 360px;
}
}
.campus_sidebar_container{
@media print , screen and ( width > 768px ){
padding-top : 0;
}
} .comment{
display : grid;
align-items : center;
.thumbnail{
display : block;
grid-row : 1;
grid-column : 1;
align-self : center;
width : 100%;
height : auto;
aspect-ratio : 1;
overflow : hidden;
border-radius : 50%;
img{
object-fit : cover;
width : 100%;
height : 100%;
}
}
.commentBox{
grid-row : 1;
grid-column : 2;
background-color : #ffdede;
border : solid 6px #a80a0e;
> div{
> *{
font-size : 14px;
line-height : 1.6;
color : black;
}
}
strong{
font-weight : 700;
}
}
@media screen and ( width <= 768px ){
grid-template-columns : 120px 1fr;
column-gap : 16px;
margin-bottom : 40px;
>.commentBox{
border-radius : 16px;
> div{
padding-block : 20px;
padding-inline : 20px;
border-radius : 16px;
}
}
}
@media print , screen and ( width > 768px ){
grid-template-columns : 144px 1fr;
column-gap : 24px;
margin-bottom : 40px;
>.commentBox{
border-radius : 16px;
> div{
padding-block : 28px;
padding-inline : 28px;
border-radius : 16px;
}
}
}
} .supervisor{
display : grid;
grid-template-rows : auto auto;
row-gap : 8px;
background-color : #ffdede;
.thumbnail{
display : block;
grid-column : 1;
align-self : center;
width : 100%;
height : auto;
aspect-ratio : 1;
overflow : hidden;
border-radius : 50%;
img{
object-fit : cover;
width : 100%;
height : 100%;
}
}
.name{
grid-row : 1;
grid-column : 2;
> span{
display : block;
&:nth-of-type( 1 ){
width : fit-content;
padding : 8px;
line-height : 1;
color : #fff;
background-color : #d30021;
border-left : 6px solid #a80a0e;
}
&:nth-of-type( 2 ){
margin-top : 8px;
font-weight : 700;
line-height : 1.6;
color : black;
}
}
}
.profile{
grid-row : 2;
padding-top : 8px;
font-size : 14px;
font-weight : 700;
line-height : 1.6;
color : black;
border-top : 1px solid #a2a2a2;
}
@media screen and ( width <= 768px ){
grid-template-columns : 120px 1fr;
column-gap : 16px;
padding-block : 20px;
padding-inline : 20px;
margin-bottom : 40px;
.thumbnail{
grid-row : 1;
}
.name{
align-self : center;
> span{
font-size : 15px;
}
}
.profile{
grid-column : 1/-1;
}
}
@media print , screen and ( width > 768px ){
grid-template-columns : 144px 1fr;
column-gap : 24px;
padding-block : 40px;
padding-inline : 40px;
margin-bottom : 40px;
.thumbnail{
grid-row : 1/-1;
}
.name{
>span{
font-size : 16px;
}
}
.profile{
grid-column : 2;
}
}
} .topbutton{
@media screen and ( width <= 768px ){
display : none ! important;
}
}