You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

108 lines
3.4 KiB

#about .content .wrapper {
height: 100%; }
@media screen and (min-width: 920px) {
.about-wrapper {
display: flex;
flex-direction: column;
max-height: calc(100% - 40px); } }
.about-wrapper .row {
width: 100%;
min-height: 360px;
padding-bottom: var(--gap);
margin-bottom: 20px;
overflow: auto; }
@media screen and (min-width: 920px) {
.about-wrapper .row {
display: flex;
overflow: hidden;
margin-bottom: 0;
height: 100%;
max-height: 50%; } }
.about-wrapper .row .col {
background: var(--dark-lighter);
padding: var(--gap);
overflow: auto;
will-change: transform, opacity; }
.about-wrapper .row .col.about-history {
position: relative; }
.about-wrapper .row .col.about-history p:not(:last-child) {
padding-bottom: var(--gap-s);
margin-bottom: var(--gap-s);
border-bottom: 2px solid var(--green); }
.about-wrapper .row .col.about-info, .about-wrapper .row .col.about-img {
position: relative;
background: none;
border: 2px solid var(--green); }
@media screen and (min-width: 920px) {
.about-wrapper .row .col.about-info, .about-wrapper .row .col.about-img {
min-width: 340px; } }
@media screen and (max-width: 919px) {
.about-wrapper .row .col.about-img {
display: none; } }
.about-wrapper .row .col.about-intro {
display: grid;
grid-gap: var(--gap) var(--gap); }
@media screen and (min-width: 1095px) {
.about-wrapper .row .col.about-intro {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
grid-template-rows: minmax(min-content, max-content); } }
.about-wrapper .row .col.about-intro > p:first-child {
position: relative; }
.about-wrapper .row .col.about-intro > p:first-child:after {
content: '';
position: absolute;
left: 0;
bottom: -20px;
display: inline-block;
width: 100%;
height: 2px;
background: var(--green); }
@media screen and (min-width: 1390px) {
.about-wrapper .row .col.about-intro > p:first-child:after {
bottom: unset;
left: unset;
top: 0;
right: -20px;
width: 2px;
height: 100%; } }
@media screen and (max-width: 919px) {
.about-wrapper .row .col.about-intro > p:last-child {
margin-top: var(--gap-s); } }
@media screen and (min-width: 920px) {
.about-wrapper .row .col:not(:last-child) {
margin-right: var(--gap); } }
.about-wrapper .row .col .about-image {
position: absolute;
top: 0;
right: 0;
width: auto;
height: 100%;
max-width: 340px;
opacity: 0.5;
filter: drop-shadow(5px 5px 15px var(--dark-darker));
object-fit: contain;
object-position: bottom right; }
@media screen and (max-width: 1009px) {
.info-list {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; } }
@media screen and (min-width: 1010px) {
.info-list {
width: 250px;
line-height: 1.4; } }
.info-list li {
padding: var(--gap-s) 0; }
.info-list li:first-child {
padding-top: 0; }
.info-list li:last-child {
padding-bottom: 0; }
.info-list li:not(:last-child) {
border-bottom: 1px solid; }
/*# sourceMappingURL=about.css.map */