// thumbnails global section { article.thumbnails.programme { border: 1px solid $lightgrey; width: calc(100% / 4 - 0.5rem * 2); &:hover{ border: none; @include shadow; } .d-flex{ color: $color_orange; } .__content { span { color: $color2024; font-size: 0.8rem; font-family: "Marianneregular_italic"; text-transform: none !important; strong { font-family: "Mariannebold_italic"; } } } } & > div:not(.__slide) { article.thumbnails.programme { a { display: block; width: 100%; height: 100%; background: white; @include shadow; } } } } .thumbnails { width: 100%; height: auto; background: white; margin: calc(#{$gutter}) 0; @media screen and (min-width: 768px) { margin: calc(#{$gutter}); } &:not(.bibliographie):not(.programme) { @include shadow; } figure { height: 150px; margin: 0; } .__wrap { padding: 1rem; time, .type_moment { font-family: "Marianneregular"; font-size: 0.8rem; text-transform: uppercase; } & > .d-flex { margin-bottom: 0.5rem; } } // thumbnails publications &.publications { @media screen and (min-width: 768px) { width: calc(100% / 2 - #{$gutter} * 2); } @media screen and (min-width: 992px) { width: calc(100% / 3 - #{$gutter} * 2); } @media screen and (min-width: 1200px) { width: calc(100% / 4 - #{$gutter} * 2); } .__media { padding: 0.5rem 0 0.5rem 0.5rem; .__img { width: 100px; } } .__wrap { padding: 0.5rem; } & > div { height: 100%; } div > * { color: $col_black; } a { display: block; height: 100%; } } &.bibliographie { background: white !important; padding: 0.5rem; &.link_ext { @include shadow; } @media screen and (min-width: 768px) { width: calc(100% / 2 - #{$gutter} * 2); } @media screen and (min-width: 992px) { width: calc(100% / 3 - #{$gutter} * 2); } @media screen and (min-width: 1200px) { width: calc(100% / 4 - #{$gutter} * 2); } & > div * { color: $col_black; &.__auteur * { font-size: 1.4rem; } &.__body { margin: 1rem 0; } } a { text-decoration: underline; color: $color2024; } } &.interviews { @media screen and (min-width: 768px) { width: calc(100% / 2 - #{$gutter} * 2); } @media screen and (min-width: 992px) { width: calc(100% / 3 - #{$gutter} * 2); } @media screen and (min-width: 1200px) { width: calc(100% / 4 - #{$gutter} * 2); } .__media { padding: 0.5rem 0 0.5rem 0.5rem; max-width: 50%; .__img { width: 100px; } } .__wrap { padding: 0.5rem; } & > div { height: 100%; } div > * { color: $col_black; } a { display: block; height: 100%; } } } // Page programme .container { &.programme { .thumbnails { @media screen and (min-width: 768px) { width: calc(100% / 2 - #{$gutter} * 2); margin: 0.5rem; } @media screen and (min-width: 992px) { width: calc(100% / 3 - #{$gutter} * 2); } .inter { margin-top: 0.5rem; span { color: $col_black; font-size: 0.8rem; font-family: "Marianneregular_italic"; text-transform: none !important; strong { font-family: "Mariannebold_italic"; } } } } } } // page moment .__ressources { .__publications { .publications { // margin: $gutter; .__media { padding: 0.5rem 0 0.5rem 0.5rem; } .__wrap { padding: 0.5rem; } @media screen and (min-width: 768px) { width: calc(100% / 2 - #{$gutter} * 2); } @media screen and (min-width: 992px) { width: calc(100% / 2 - #{$gutter} * 2); } @media screen and (min-width: 1200px) { width: calc(100% / 2 - #{$gutter} * 2); } } } .__bibliographie { .thumbnails { background: transparent; a { & > div { div, span, p { display: inline; background: white; } } } @media screen and (min-width: 768px) { width: calc(100% / 2 - #{$gutter} * 2); } @media screen and (min-width: 992px) { width: calc(100% / 2 - #{$gutter} * 2); } @media screen and (min-width: 1200px) { width: calc(100% / 2 - #{$gutter} * 2); } } } .__interviews { .interviews { // margin: $gutter; .__media { padding: 0.5rem 0 0.5rem 0.5rem; } .__wrap { padding: 0.5rem; } @media screen and (min-width: 768px) { width: calc(100% / 2 - #{$gutter} * 2); } @media screen and (min-width: 992px) { width: calc(100% / 2 - #{$gutter} * 2); } @media screen and (min-width: 1200px) { width: calc(100% / 2 - #{$gutter} * 2); } } } } // thumbnails participant .thumbnails_participants { figure { & > div { width: 100px; height: 100px; margin-left: 0.5rem; img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; } } figcaption { border: 1px solid $color2024; &.__info { padding: 4rem 0.5rem 0.5rem 0.5rem; margin-top: -3rem; background: white; .__name { text-transform: uppercase; color: $col_black !important; } } } } }